简介
第一次使用模板，它被加载到模板缓存中，以便快速检索。你可以直接将模板标签加载到缓存中，或者通过$templateCache服务。
通过script标签：
<script type=”text/ng-template” id=”template.html”>
<p>This is the content of the template</p>
</script>
备注：script标签模板不需要包含在文档头部。但他必须在$rootElement下，不然模板将会被忽略。
通过$templateCache服务：
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
检索模板后，只需使用它在您的组件：
myApp.component('myComponent', {
templateUrl: 'templateId.html'
});
或者通过$templateCache获取它
$templateCache.get('templateId.html')
应用
当您在应用程序中引用模板时，Angular-JS通常会从服务器延迟加载模板（通过ng-include，路由配置或其他机制）。Angular缓存每个模板的源代码，以便后续引用不需要其他服务器请求。但是，如果您的应用程序被分成许多小组件，那么初始加载过程可能涉及大量额外的服务器请求。
grunt-html2js或grunt-angular-templates
等插件将一组模板转换为JavaScript，并将它们组装成一个Angular模块，该模块在加载模块时直接填充缓存。您可以将此模块与主应用程序代码连接，以便Angular不需要进行任何其他服务器请求来初始化应用程序。
使用插件编译后示例：
//template-a.html+template-b.html => ab-tpl.js
//将两个html合并，转化为js
angular.module('templateModule', []).run(['$templateCache', function ($templateCache) {
"use strict";
$templateCache.put("global_appfooter.html","<div>template-a.html</div>");
$templateCache.put("global_detailcard.html","<div>template-b.html</div>");
}]);
