Angular模板缓存、gulp和systemjs集成

Question

我希望我的templateCache在我的主angular模块中--为了解释起见，我们称这个模块为“app”。我设置了一个gulp angular-templatecache任务来创建模板缓存：

gulp.task('templates', function () {
return gulp.src(path.templates)
    .pipe(templateCache({
        moduleSystem: 'IIFE',
        standalone: false,
        root: 'views/',
        module: "app"
    }))
    .pipe(gulp.dest(path.dist));
});

这将创建一个生命周期模块，如下所示：

(function(){
    angular.module("app").run(["$templateCache", function($templateCache) {
    $templateCache.put("views/add_tag_dlg.html",...
    ...
})();

这是非常合理的，但是为了工作，main.js (包含角度入口点)需要首先运行，以创建“app”模块。

我相信这是一个先有鸡后有蛋的情况。应用程序将无法加载，因为我在加载模板之前对其进行了初始化；但我无法提前初始化模板，因为angular模块'app‘尚未创建。

到目前为止，我找到的唯一解决方案是让gulp任务创建自己的独立模块，我们称之为“模板”：

gulp.task('templates', function () {
return gulp.src(path.templates)
    .pipe(templateCache({
        moduleSystem: 'IIFE',
        standalone: true,
        root: 'views/',
        module: "templates"
    }))
    .pipe(gulp.dest(path.dist));
});

这会产生这样的结果：

(function(){
    angular.module("templates", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("views/add_tag_dlg.html",...
    ...
})();

请注意，它不是只使用angular模块，而是创建自己的模块。要实现这一点，当我创建我的主模块时，它必须依赖于“模板”：

var app = angular.module('app', ['templates', ... ]);

这是可行的，但这不是我想要的，因为现在如果不编译模板就无法运行。我更喜欢一种工作流程，在那里我不需要为了调试而编译模板…它们将由浏览器加载为views/子目录下的资源。

所以我不完全确定在这里要做什么。到目前为止，我想出的最好的办法是为开发和生产场景都有一个不同的index.html，并且不再把‘模板’当作一个系统全局模块来对待……然后，对于dev，加载一个空的模板缓存，对于prod，加载生成的缓存。

要么这样，要么我可以将angular从systemjs加载策略中完全删除，然后自己加载angular，但我讨厌这样做。我只是加载了app.js，并且angular (和它的所有组件)在systemjs中被列为app.js的依赖项，这真的很好，所以它只是以正确的顺序自己做所有的事情。

我所能找到的种子都不能真正解决这个问题。关于如何在systemjs环境中处理模板缓存，主流的想法是什么？

Answer 1

有一个用于缓存模板的SystemJs plugin。使用它可能是一个大的重构，但你可以使用他们缓存模板的方法来获得你想要的：

angular.module('ng').run(["$templateCache", function($templateCache) {
    $templateCache.put("views/add_tag_dlg.html",...
    ...
})();

通过将任务中的模块从app更改为ng。

Answer 2

有一个gulp plugins，它可以读取您的路由、指令，并用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>'
    };
});