angularjs – 如何在Angular UI路由器中预加载模板？

Is there a way that I could combine all these HTML files into one and pre-load the files so every action didn’t involve another request?

是的，通过使用html2js;

或者，确切地说，一个名为“咕噜声/ gulp”的插件分别叫做grunt-html2js/gulp-html2js

怎么运行的

根据这grunt-html2js tutorial：

“html2js是一个插件(…)，解析您应用程序中的所有模板文件，并创建一个填充$templateCache的javascript文件。

这是减少应用程序启动应用程序所需的请求数量的非常有用的技巧。

它也可以缩小html片段，节省一些bandwitdh。“

———-

根据grunt-html2s Github repository：

“html2js将一组模板转换为JavaScript，并将其组装成Angular模块，该模块可在模块加载时直接显示缓存。

您可以将此模块与主应用程序代码连接起来，以便Angular不需要再进行其他服务器请求来初始化应用程序。

———-

根据我:)

我喜欢html2js是你不需要改变任何角度代码，只需配置gruntfile.js / gulpfile.js。

然后，您的templateUrl文件将在$ templateCache中提供automagically。

所以它确实是你想要的：

>将所有模板合并成一个模块;
>编写模块的JavaScript源代码;

所有您需要做的是将模块指定为代码中的依赖关系。

Once the module is loaded,all your templates are available in the cache: no request needed!

GRUNT / GULP配置示例

grunt.initConfig({
  html2js: {
    options: {
    base: 'app',module: 'templates',htmlmin: {
      ... many available options: see GitHub repo ...
    }
  },main: {
      src: ['app/**/*.html'],dest: 'templates.js'
    },},})

那么只需使用模板模块作为依赖：

angular.module('myApp',[ 'templates']);

———-

这是gulp-html2js GitHub存储库的一个例子：

gulp.task('scripts',function() {
  gulp.src('fixtures/*.html')
    .pipe(html2js({
      outputModuleName: 'template-test',useStrict: true
    }))
    .pipe(concat('template.js'))
    .pipe(gulp.dest('./'))
})

测试

此外，html2js也是test directives that use the templateUrl property非常好的工具。

了解更多信息

Joel Hooks“(Egghead教练)book about automation后，我强烈推荐了html2js。

EggHead网站的Watch a dedicated video about html2js in the pro section。

Testing directives using the templateUrl property with Karma and karma-ng-html2js-preprocessor

注意

从技术上讲，您可以使用ng-html2js，而不使用Gulp或Grub;您可以使用如下所示的命令行：

ng-html2js inputFile [outputFile] [-m moduleName] [--module-var ngModule]

但是，您需要为每个templateUrl文件运行上述命令，Gulp / Grub自动化似乎是一种更有效的方式。

免责声明

我在我提到的书/网站/工具中没有特别的兴趣或份额。

注意：我也应该添加，你也可以将这个文件添加到你的html页面中：

<script src="path/to/templates.js"></script>