我正在使用Angular UI Router。我有很多这样的模板调用：
var access = {
name: 'access',
templateUrl: 'app/access/partials/a1.html',
};
由Access提供的页面取决于:content。
我是否有办法将所有这些HTML文件合并成一个文件，并预加载文件，以便每个操作不涉及另一个请求？ 我意识到我可以直接将HTML放在模板中，但我能否将多个模板的HTML合并为一个文件，并且让它们全部预加载，以便在需要时准备好？
有没有办法将所有这些HTML文件合并为一个文件，并预加载文件，以便每个操作不涉及其他请求？
有，可以使用 html2js；
或者更确切地说，可以使用 grunt/gulp 插件，分别称为 grunt-html2js / gulp-html2js
工作原理
"html2js是一个插件（...），它解析您应用中的所有模板文件，创建一个javascript文件来填充$templateCache。
这是一种非常有用的技巧，可以减少您的应用程序需要发起的请求数量以启动应用程序。
它还可以缩小HTML片段，节省一些带宽。"
"html2js将一组模板转换为JavaScript，并将它们组装成一个Angular模块，当模块加载时直接将其预加载到缓存中。
你可以将这个模块与你的主应用程序代码连接起来，这样Angular就不需要进行任何额外的服务器请求来初始化应用程序。"
html2js 的优点在于你不需要改变任何 Angular 代码，只需配置 gruntfile.js / gulpfile.js。
然后你的 templateUrl 文件就会 神奇地 在 $templateCache 中可用。
所以它正好做到了你想要的：
你所需做的就是在你的代码中指定该模块作为依赖项。
一旦加载了该模块，你的所有模板都可以在缓存中使用：无需请求！
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是一个非常好的工具，可以测试使用templateUrl属性的指令。
更多信息请参考
在阅读Joel Hooks(Egghead讲师)关于自动化的书籍后，我发现了html2js，强烈推荐。
在EggHead网站的专业版中观看有关html2js的专门视频。
使用Karma和karma-ng-html2js-preprocessor测试指令，使用templateUrl属性
注意
从技术上讲，您可以只使用ng-html2js，而不使用Gulp或Grub；然后可以使用以下命令行：
ng-html2js inputFile [outputFile] [-m moduleName] [--module-var ngModule]
然而，由于您需要为每个templateUrl文件运行上述命令，使用Gulp/Grub自动化似乎是更高效的方法。
免责声明
我对所提到的书籍/网站/工具没有特别的兴趣或股份。
注意：我还应该补充说明，您还可以将此文件添加到您的html页面中：
<script src="path/to/templates.js"></script>
gulp-ng-html2js ，因为 gulp-html2js 只会在 window 对象中创建一个无法用作模块依赖的数组。 - SET001<div ng-repeat="template in templates">
<ng-include src="template.url"></ng-include>
</div>
所以这里的“templates”是一个对象数组，其中包含了您想要一次性加载到主.html文件中的其他模板的所有url。
很简单，把它们全部创建为ng-template块：
<script type="text/ng-template" id="app/access/partials/a1.html">
Content of the template.
</script>
$templateCache，你可以将其添加到你的应用程序中。
grunt-angular-templates - https://www.npmjs.com/package/grunt-angular-templates
使用，
yourApp.run(['$templateCache', function($templateCache) {
$templateCache.removeAll();
}])
你的问题也在这个网站上得到了指引， http://javahow.net/questions/27321315/using-angulars-ui-router-how-can-we-make-sure-the-new-version-of-the-html-part
$templateCache来存放这个模板。 - Pankaj Parkar