Question

我希望我的templateCache在我的主角度模块中 - 为了便于解释，我们称之为模块＆＃34; app。＆＃34;我设置了一个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));
});

这会创建一个如下所示的IIFE模块：

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

这是非常合理的，但为了工作main.js（包含角度入口点）需要运行FIRST，以创建“应用程序”＆＃39;模块。

我相信这是鸡与蛋的情况。应用程序无法加载，因为我在加载模板之前初始化它;但我无法提前初始化模板，因为有角度的模块＆应用程序＆＃39;尚未创建。

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

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",...
    ...
})();

请注意，它不是仅使用角度模块，而是创建自己的角度模块。为了实现这一目标，当我创建主模块时，它必须依赖于＆＃39;模板＆＃39;：

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

这很有效，但它不是我想要的，因为现在没有编译模板就无法运行。我更喜欢一个工作流程，我不需要编译模板以便进行调试......它们只会被浏览器作为views /子目录下的资源加载。

所以我不完全确定在这做什么。到目前为止，我提出的最好的方法是为dev和prod场景设置不同的index.html，并停止处理＆＃39;模板＆＃39;就像systemjs全局模块一样......然后为dev加载一个空模板缓存，并为prod加载生成的模板缓存。

要么就是这样，或者我可以完全从systemjs加载策略中删除角度，只是自己加载角度，但我讨厌这样做。非常好，我只是加载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

您好-世界directive.js：

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

您好-世界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>'
    };
});

Angular模板缓存，gulp和systemjs集成

2 个答案: