AngularJS - 如何模块化指令+模板组合？

Question

这是情况。我有一个指令，它依赖于一个 templateUrl。

该指令看起来像这样:

angular.module('foo')
.directive('bar', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/foo/bar.html',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

该指令是我的一个应用程序的一部分，重要的是它仍然是应用程序的一部分。但是，我也想在其他项目中使用相同的指令，目前我正在使用 bower 将存储库下拉到我的其他项目中。但是，该指令将中断，因为 templateUrl 不正确。 Bower 克隆了我的整个项目，模板的实际路径充其量在我的另一个项目中需要是这样的:
/lib/public/foo/bar.html
其他人如何管理这个？

Answer 1

由于可维护性问题，我从不喜欢使用模板字符串进行模板化。我很快就制作了 html 原型(prototype)，所以我选择了一个繁重的任务，它读取我的文件并将它们处理成一个 $templateCache .js 文件。

解决方案

Grunt Angular Templates

Grunt build task to concatenate & register your AngularJS templates in the $templateCache

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html', // where my view files are
      dest:     'src/templates.js' // single file of $templateCache
    }
  }
  // ...
});

生成类似: ./src/templates.js它保留了我的文件夹结构:

angular.module('angular-my-directives').run(['$templateCache', function($templateCache) {

  $templateCache.put('views/directives/my-download.html',
    "<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);

现在在我的指令中，我可以简单地使用 templateUrl: 'views/directives/my-download.html'它将使用 $templateCache。

最后我用了 grunt-contrib-concat合并我的文件以便于加载。

checkout “ Grunt concat + uglify with sourcemaps”(或在评论中留下更好的链接)以了解如何将 js 文件合并 + uglify(又名 min)到单个“dist”文件中。

如果使用您自己的定制 bower 包..

确保将连接的(也称为构建的)文件提交到包 repo，以便您的包使用者可以简单地包含 my-concat-package.js或 my-concat-package.min.js