角模板缓存，吞噬和systemjs集成

我想我的模板缓存在我的主角模块 - 为了解释，我们称之为模块“应用程序”。我设置了一个大口，角templatecache任务来创建模板缓存：角模板缓存，吞噬和systemjs集成

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，以创建'app'模块。

我相信这是一个鸡与鸡蛋的情况。该应用程序将无法加载，因为我正在加载模板之前初始化它;但我无法提前初始化模板，因为角度模块'app'尚未创建。

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

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

注它不是只使用角度模块，而是创建它自己的。为了使这项工作，当我创建我的主要模块，它必须依赖于“模板”：

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

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

所以我不完全确定这里要做什么。迄今为止我所得到的最好的结果是为dev和prod场景设置了不同的index.html，并停止将'templates'视为systemjs全局模块......然后为dev加载一个空模板缓存，并为prod加载生成的一个。

不是这样，或者我可以从systemjs加载策略中删除角度，只是自己加载角度，但我讨厌这样做。我真的很高兴我只加载app.js，而angular（及其所有组件）在systemjs中列为app.js的依赖关系，因此它只是以正确的顺序完成所有事情。

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

来源

2015-11-06 wz2b

缓存模板有一个SystemJs plugin。使用它可能是一个大的重构，但你也许可以用自己的缓存模板的方法来得到你想要的东西：

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

通过从应用程序到纳克更改模块在你的任务。

来源

2016-04-24 22:54:42 npjohns

有一个吞咽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' 
    }; 
});

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

一饮而尽，角嵌入模板会生成以下文件：

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

来源

2016-07-16 09:35:23

角模板缓存，吞噬和systemjs集成

回答

相关问题