AngularJS 模板缓存答案

【问题标题】：AngularJS TemplateCacheAngularJS 模板缓存
【发布时间】：2015-04-23 16:33:05
【问题描述】：

我正在尝试使用gulp-angular-templatecache 生成模板缓存并将其与 Angular 脚本合并到一个 JS 文件中。

gulp 任务：

gulp.task('generatetemplatecache', function () {
    return gulp.src(['dev/app/**/*.tpl.html'])
    .pipe(minifyHTML({quotes: true}))
    .pipe(templateCache({ module:'templateCache', standalone:true }))
    .pipe(gulp.dest('public/app'));
});

这基本上是输出的样子：

var app = angular.module("app",['templateCache']);
angular.module("templateCache", []).run(["$templateCache", function($templateCache) {$templateCache.put("test.tpl.html","<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>My Title</title></head><body></body></html>");
$templateCache.put("layout/popover.tpl.html","<h3 class=\"popover-title\">Click</h3><div class=\"popover-content\"><table style=\"width:600px\" class=\"table\"><tr ng-repeat=\"customer in customers\"><td>{{customer.name}}</td><td>{{customer.street}}</td></tr></table>ss</div>");

但问题是，我发现它没有从模板缓存加载。每当 Angular 需要模板时，它仍然会抓取原始模板 html 文件。如果该 html 文件不可用，那么将无法显示它。

为什么它不起作用？我做错了什么？模板缓存中的 url 是相对于index.html 还是相对于域的根目录？

【问题讨论】：

抓取原始文件是什么意思？这意味着您更改了 HTML 文件，但仍然在浏览器中看到旧的更改？
@sma 我的意思是它仍然需要原始文件到位。如果我拿走模板 html 文件，它将无法加载。
你能发布你用来创建模板文件的 gulp 任务吗？
@sma 我已经发布了生成模板缓存的 gulp 任务。
所以这应该是创建一个名为 templates.js 的新文件，对吗？我假设您以某种方式加载此文件，然后将其作为依赖项添加到您的主模块？

标签： javascript angularjs gulp

【解决方案1】：

要检查的一件事是在创建模板文件时确保路径正确。

例如，在我的应用程序中，我所有的源代码都是这样组织的：

modules
   |---user
      |---user-controller.js
      |---user-service.js
      |---user.html

   |---navigation
      |---navigation-controller.js
      |---header.html
      |---footer.html

因此，在我的路由器或templateUrl 属性的任何指令中，我引用了我的 HTML 文件，例如：

modules/user/user.html

所以，话虽如此，在我的 Gulpfile 中，当我创建我的 templateCache 文件时，我指定了一个“模块”的根目录，以便为每个文件在 templateCache 中提供一个与此路径相等的键。如：

gulp.task('templates', function () {
    gulp.src('./app/modules/**/*.html')
        .pipe(angularTemplatecache('templates.js', {
            standalone: true,
            root: "modules"
        }))
        .pipe(gulp.dest('./app/templates'));
});

如果所有其他配置问题都正确，则此路径问题可能是您无法加载它们的原因（即，您正确加载了 templates.js 文件，您将其作为模块依赖项包含在您的应用程序中）

【讨论】：

【解决方案2】：

您还可以使用另一个 gulp plugin，它可以读取您的路由、指令并将 templateUrl 替换为 templateUrl 中引用的模板。

src
+-hello-world
  |-hello-world-directive.js
  +-hello-world-template.html

hello-world-directive.js：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        // relative path to template
        templateUrl: 'hello-world-template.html'
    };
});

hello-world-template.html：

<strong>
    Hello world!
</strong>

gulpfile.js：

var gulp = require('gulp');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('js:build', function () {
    gulp.src('src/scripts/**/*.js')
        .pipe(embedTemplates())
        .pipe(gulp.dest('./dist'));
});

gulp-angular-embed-templates 将生成以下文件：

angular.module('test').directive('helloWorld', function () {
    return {
        restrict: 'E',
        template:'<strong>Hello world!</strong>'
    };
});

【讨论】：