javascript - 如何将 $templateCache.put(...) 的内容放入 html 文件而不是将 Html 嵌入到 Javascript 中？

Question

当你有一个文件 app.js 和许多模块时，像下面的代码片段一样在 JavaScript 中嵌入 HTML 是不可维护的。

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做这种事。有一个名为 angular-template-cache 的 npm 模块这正是你想要的。

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

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

这个 gulp 任务将创建一个文件 /dist/templates.js，其中包含一个 $templateCache.put 用于 src 下的每个 html 文件> 目录。您可以将这部分与缩小、缓存清除等一起纳入构建过程。