我正在使用Angular UI路由器。我有很多这样的模板调用：
var access = {
name: 'access',
templateUrl: 'app/access/partials/a1.html',
};
Access提供的页面取决于：content。
有没有一种方法可以将所有这些HTML文件组合为一个文件并预加载文件，以便每个操作都不会涉及另一个请求？我意识到我可以将HTML直接放在模板中，但是我可以将多个模板中的HTML合并到一个文件中，并全部预先加载，以便在需要时可以使用吗？
最佳答案
有没有一种方法可以将所有这些HTML文件组合为一个文件并预加载文件，以便每个操作都不会涉及另一个请求？
是的，使用html2js;
或者，确切地说，是一个分别名为grunt-html2js / gulp-html2js的grunt / gulp插件
这个怎么运作
根据此grunt-html2js tutorial：
“ html2js是一个插件（...），用于解析应用程序中的所有模板文件，并创建一个填充$templateCache的javascript文件。
这是一个非常有用的技巧，可以减少应用程序启动应用程序所需的请求数量。
它还可以缩小html代码段，从而节省一些带宽。”
----------
根据grunt-html2s Github repository：
“ html2js将一组模板转换为JavaScript，并将它们组合成一个Angular模块，该模块在加载模块时直接启动缓存。
您可以将此模块与您的主要应用程序代码连接起来，这样Angular无需发出任何其他服务器请求即可初始化应用程序。”
----------
而根据我:)
我喜欢html2js的地方是您不需要更改任何角度代码，只需配置gruntfile.js / gulpfile.js。
然后，您的templateUrl文件automagically将在$templateCache中可用。
因此，它完全符合您的期望：
将所有模板组合成一个模块；
编写模块的JavaScript源代码；
您需要做的就是将模块指定为代码中的依赖项。
加载模块后，所有模板都将在缓存中可用：无需任何请求！
GRUNT / GULP CONFIG的示例
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>
关于angularjs - 如何在Angular UI路由器中预加载模板？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30098081/