角模板緩存，吞噬和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集成

回答

相關問題