$templateCache

简介

第一次使用模板，它被加载到模板缓存中，以便快速检索。你可以直接将模板标签加载到缓存中，或者通过$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>");
}]);

参考文章

https://www.cnblogs.com/ms-grf/p/6874256.html