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进行原型设计，所以我选择了一个读取我的文件的grunt任务，并将它们处理成一个$templateCache js文件。

<强>解决方案

Grunt Angular Templates

Grunt构建任务以连接＆amp;在中注册您的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来合并我的文件以便于加载。

结帐＆＃34; Grunt concat + uglify with sourcemaps＆＃34; （或在评论中留下更好的链接）来了解如何将+ uglify（aka min）js文件连接到单个＆＃34; dist＆＃34;文件。

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

请确保将连接（也称为内置）文件提交到软件包存储库，以便您的软件包使用者可以只包含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代码放入您的指令目录。所有templateUrl看起来都是

templateUrl：＆＃39; /template/my.tpl.html'

在应用项目中：

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

e.g：

// 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'));
});

这会生成文件＆＃39; templateFile.js＆＃39;在您的dist文件夹中，然后可以将您的指令文件打包到bower.json中。

Answer 6

我已经用an answer使用grunt将你的html文件构建到$ templateCache文件中，但我已经切换到了gulp，所以任何人都希望按照相同的流程但使用gulp，checkout {{3} }

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

6 个答案:

在您的指令项目中：

在应用项目中：