包含用于角度的凉亭组件中的html模板

Question

我正在为我的角度应用程序制作一些可重复使用的指令，方法是将它们放在一个单独的bower组件中。

我想使用templateUrl作为指令，这样我就不会被迫做这篇文章中的三个选项之一：How do I use separate templates with my angular directive bower package?这里是建议的amoderate释义：1副本和过去的html到js文件，2使用grunt将模板编译成js，或者3将模板放在不同的目录中并让服务器处理请求，这样只有bower安装才能使用这些指令。

是否有更好的方法可以将模板文件用于组件中的指令，还是仅仅将bower设置为以这种方式工作？

Answer 1

我确实解决了这个问题。我很抱歉没有提前发布答案。

我最终使用grunt-angular-templates

如果您正在使用gulp，则可能存在类似的库。

这是我的目录结构，我的html位于模板目录

project
 src
   controllers
   directives
   templates

这就是我在Gruntfile中配置选项的方法

 grunt.initConfig({
 ...
 ngtemplates: {
   projectName: {
     cwd: 'src',
     src: 'templates/**/*.html',
     dest: 'src/templates/templates.js'
   }
 }

我有另一个grunt任务grunt-contrib-concat来连接项目中的所有javascript文件。因此，模板被捆绑到最终的js文件中。

在代码和测试中，无论是否加载html或javascript版本，您都可以以相同的方式引用html文件。

前：

angular.module('myModule')
  .directive('myModuleDirective', function () {
    return {
        restrict: 'E',
        templateUrl: 'templates/mainTemplate.html'
    };
});