Question

我正在创建一个AngularJS模块，其中包含一些将在我的组织内的其他项目中重用的指令。目前，当一些项目需要使用这个通用模块时，我需要发送两件事：带有AngularJS代码的javascript，其中创建了所有指令，我的指令使用的所有模板视图。

我目前的结构如下：

var commonWidgets = angular.module('commonWidgets', []);

commonWidgets.directive('commonGrid', function () {
    return {
        restrict: 'A',
        scope: {
            options: '='
        },
        templateUrl: '/views/grid.html',
        link: function (scope) {
           ...
        }

    };
});

在这个例子中，我必须与另一个项目共享common-widgets.js和/views/grid.html。

问题：有没有办法只发送javascript代码？

我认为可能的解决方案是声明我的javascript代码，如下所示：

var commonWidgets = angular.module('commonWidgets', []);

commonWidgets.directive('commonGrid', function () {
    return {
        restrict: 'A',
        scope: {
            options: '='
        },
        template: '<div>A relative big code goes here</div>',
        link: function (scope) {
           ...
        }

    };
});

问题在于，当我在Javascript代码中有模板时，很难维护。另一方面，这个库的消费者不需要担心这些观点。

有没有办法在构建生产就绪的AngularJS库时将templateUrl更改为模板？

Answer 1

第一个选项

您可以使用$templateCache服务和

commonWidgets.run(function($templateCache) {
  $templateCache.put('/views/grid.html', 'This is the content of the template');
});

只要commonWidgets是模块的名称

第二个选项

您可以使用grunt-angular-templates并从现有模板生成$ templateCache。

第一种和第二种可能性的某种组合对你来说是最好的。

ngtemplates任务

部署Gruntfile，任务 ngtemplates ，并在构建过程中调用

ngtemplates: {
      app: {
        cwd: 'app',
        src: 'views/**/*.html', // all subdirectories
        dest: '.tmp/templates.js',
        options: {
          htmlmin: '<%= htmlmin.dist.options %>',
          usemin: 'scripts/modules.js', // append .tmp/tempaltes to scripts/modules.js file
          module: appName // global appName from Gruntfile config section
        }
      }
    }

Answer 2

最好的方法是使用Grunt将HTML构建到单个JS文件中。

Grunt有一个插件，grunt-angular-templates可将您的所有HTML模板转换为JavaScript文件并将其注册到Angular中，这样您就不必更改任何代码。

然后，您可以简单地分发生成的JS而不是HTML文件。

如何在不需要发送HTML代码的情况下共享AngularJS指令

2 个答案:

第一个选项

第二个选项

ngtemplates任务