在 Angular 的 Bower 组件中包含 html 模板

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

我想使用 templateUrl 作为指令，这样我就不会被迫执行本文中的三个选项之一：如何在我的 Angular 指令 Bower 包中使用单独的模板？ https://stackoverflow.com/questions/23504541/how-do-i-use-separate-templates-with-my-angular-directive-bower-package以下是对建议的适度解释：1 将 html 复制并粘贴到 js 文件中，2 使用 grunt 将模板编译为 js，或者 3 将模板放在不同的目录中，让服务器处理请求，以便指令仅通过凉亭安装无法使用。

是否有更好的方法来使用组件中指令的模板文件，或者 Bower 是否没有设置为以这种方式工作？

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

我最终使用了grunt 角度模板 https://www.npmjs.com/package/grunt-angular-templates

如果您使用 gulp，可能有一个类似的库。

这是我的目录结构，我的 html 位于 templates 目录中

project
 src
   controllers
   directives
   templates

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

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

我还有另一个艰巨的任务grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-concat连接项目中的所有 javascript 文件。因此，模板被捆绑到最终的 js 文件中。

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

Ex:

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