Как поместить содержимое $templateCache.put(...) в html-файл вместо встраивания Html в Javascript?

Question

Встраивание HTML в JavaScript, как в следующем фрагменте кода, невозможно поддерживать, если у вас есть один файл app.js и много модулей.

app.js

app.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/first',{
    templateUrl: 'partial/first.html',
    controller: 'FirstCtrl' 
  });
}]).run(function($templateCache){
     $templateCache.put('partial/first.html', '<p>Hundred lines of Html</p>');
    });

Можно ли перенести эти 100 LoC из $templateCache.put(...) в Html-файл так же, как мы используем templateUrl вместо template? ИЛИ предложите другой подход для достижения этой цели, потому что я теряю контроль над кодом. Я хочу использовать $ templateCache для быстрого поиска.

Answer 1

Вы должны использовать скрипт сборки, например, с gulp, чтобы делать подобные вещи. Существует модуль npm, называемый angular-template-cache, который делает именно то, что вы хотите.

var angularTemplateCache = require('gulp-angular-templatecache');

gulp.task('compile:templates', () =>
    gulp.src('/src/**/*.html')
        .pipe(angularTemplateCache('templates.js'))
        .pipe(gulp.dest('/dist'))
);

Эта глоточная задача создаст файл /dist/templates.js который содержит $templateCache.put для каждого файла HTML под src реж. Вы можете сделать эту часть процесса сборки вместе с минификацией, очисткой кэша и т. Д.