Кэш шаблонов Angular, gulp и интеграция с systemjs

Я бы хотел, чтобы мой templateCache был в моем основном модуле angular — для пояснения давайте назовем этот модуль «приложением». Я настроил задачу 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 (который содержит угловую точку входа) необходимо запустить ПЕРВЫМ, чтобы создать модуль «приложение».

Я считаю, что это ситуация курицы и яйца. Приложение не загрузится, потому что я инициализирую его до загрузки шаблонов; но я не могу инициализировать шаблоны заранее, потому что угловой модуль «приложение» еще не создан.

Единственное решение, которое я нашел до сих пор, — заставить задачу 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 как для сценариев разработки, так и для сценариев производства, и перестать рассматривать «шаблоны» как глобальный модуль systemjs... затем для разработчика загрузить пустой кеш шаблона, а для производства загрузить сгенерированный.

Либо так, либо я могу полностью удалить angular из стратегии загрузки systemjs и просто загрузить angular самостоятельно, но я ненавижу это делать. Очень приятно, что я просто загружаю app.js, а angular (и все его компоненты) перечислены в systemjs как зависимости от app.js, поэтому он просто делает все сам в правильном порядке.

Ни одно из семян, которые мне удалось найти, не решает эту проблему. Каково преобладающее мнение о том, как обрабатывать кэши шаблонов в среде systemjs?


angularjs systemjs
person wz2b    schedule 06.11.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Существует плагин для кеширования шаблонов. Его использование может быть большим рефакторингом, но вы, вероятно, можете использовать их метод кэширования шаблонов, чтобы получить то, что вы хотите:

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

Изменив модуль в вашей задаче с app на ng.

person npjohns    schedule 24.04.2016

arrow_upward
0
arrow_downward

Существует gulp плагины, которые могут читать ваши маршруты, директивы и заменять 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>'
    };
});
person ankur kushwaha    schedule 16.07.2016