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 原型制作速度非常快，所以我选择了一个繁重的任务，它读取我的文件并将它们处理成单个 $templateCache js 文件。

解决方案

Grunt Angular Templates

Grunt 构建任务以连接和注册您的 AngularJS 模板 $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 来合并我的文件以便于加载。

查看“Grunt concat + uglify with sourcemaps”（或在 cmets 中留下更好的链接）以了解如何将 js 文件合并 + uglify（又名 min）到单个“dist”文件中。

如果使用您自己的自定义凉亭包..

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

Answer 2

Angular 指令具有templateUrl 和template 属性。 template 接收一个 HTML 字符串。这不是一个完美的解决方案，因为您需要将 HTML 放入您的 JS 中。但是对于库创建者来说，将 HTML 字符串直接放在 template 属性上是一种常见的模式，这样他们就可以将他们的模块包装到一个文件中。

您可能希望将 templateUrl-to-template 作为您的 lib 的构建步骤。

看看Angular Bootstrap Bower Repo。

Answer 3

对此的一种解决方案，也是我个人首选的解决方案，是将模板放入$templateCache 的Module.run 函数中。这样你就不用担心 url 引用了错误的东西——你可以给它任何你想要的任意识别 url——而且它永远不需要 http 请求来获取该模板并启动。

Answer 4

在你的指令项目中：

使用 xyz.tpl.html 文件名创建所有模板，并将所有 js 代码放入 your-directive 目录。所有 templateUrl 看起来像

templateUrl: '/template/my.tpl.html'

在应用项目中：

在您的项目中创建一个 gulp/grunt 任务，用于将所有 *.tpl.html 文件从 bower_components 复制到 /template/ 目录中（默认）。

例如：

// copy template files
gulp.task('copy-tpl', function() {
    return gulp.src([
        config.dirs.src.bower_components + '/**/*.tpl.html'
    ])
            .pipe(flatten())
            .pipe(gulp.dest(config.dirs.build.tpl));
});

重要！ /template 目录是一个约定（如 js、css 等）。

Answer 5

您可以通过 gulp 使用 gulp-angular-templatecache 来执行此操作。

你的指令看起来像这样：

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

你的gulpfile.js 看起来像这样：

var gulp = require('gulp'),
    addTemplates = require('gulp-angular-templatecache');

gulp.task('default', function() {
    gulp.src('templatesDir/**/*.html')
        .pipe(addTemplates('templateFile.js', {module: 'foo' }))
        .pipe(gulp.dest('dist'));
});

这会在您的 dist 文件夹中生成文件“templateFile.js”，然后可以将其与您的 bower.json 中的指令文件打包。

Answer 6

我已经给了an answer 使用 grunt 将你的 html 文件构建到 $templateCache 文件中，但我已经切换到 gulp，所以任何想要遵循相同过程但使用 gulp 的人，结帐 gulp-angular-templatecache