angular 缓存模板 ng-template $templateCache

由于浏览器加载html模板是异步加载的，如果加载大量的模板会拖慢网站的速度，这里有一个技巧，就是先缓存模板。

使用angular缓存模板主要有三种方法：

方法一：通过script标签引入

<script type="text/ng-template" >
    <h4>hello</h4>
    <p>这是script标签获取模板文件的方式</p>
    <a href="http://www.baidu.com">标签启用templateCache方式</a>
</script>

注意，这里的id只是指十几使用模板时的一个引用，而不是一个url， 模板的实际内容在script标签里。ng-template指明这是angular模板。

当然，模板的实际内容我们也可以使用themeleaf的标签来引用一些html页面，如th:include和th:replace。

<script type="text/ng-template" >
    <div th:replace="components/header :: header"></div>
    
    //<div th:include="components/footer :: footer"></div>
</script>

th:replace和th:include的参数格式是：templatename::[domselector]表示引入模板页面中的某个模块。

其中templatename引入模板页面，domselector引入自身模板的模块。

注意：script标签模板不需要包含在文档头部。但他必须在$rootElement下，不然模板将会被忽略。

方法二：通过$templateCache服务来实现

angular.module('myApp', [])
  .controller('myCtrl', ['$scope','$templateCache', function($scope,$templateCache){
       var tmp = '<h4>hello</h4>'
             + '<p>这是直接调用$templateCache服务获取模板文件的方式</p>'
             + '<a href="http://www.baidu.com">服务启用templateCache方式</a>';
       $templateCache.put('hello.html',tmp);               
   }])

$templateCache的put()方法负责向内存中写入模板内容，然后在directive中用controllerUrl:'hello.html'就可以使用，甚至可以使用ng-include="'hello.heml'"来调用。

ng-include的方式：

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
    <div ng-include="'hello.html'"></div>
</div>

directive的方式：

angular.module('myApp', [])
    .directive('templateDemo', ['$log', function($log){
        return {
            restrict: 'A', 
            templateUrl: 'hello.html',
            replace: true,
            link: function($scope, iElm, iAttrs, controller) {}
            }
    }])
    
//html
<div ng-app="myApp" ng-controller="myCtrl as ctrl">
    <div template-demo></div>
</div>

$templateCache基于cacheFactory，接口保持一致，方法主要有：

方法三：$templateCache和ng-bind-html

<div ng-app="Demo" ng-controller="testCtrl as ctrl">
    <div ng-bind-html="ctrl.text"></div>
</div>

angular.module("Demo", [])
    .run(["$templateCache",templateCache])
    .controller("testCtrl", ["$templateCache","$sce",testCtrl]);
    function templateCache($templateCache){
      $templateCache.put('templateId.html', '<a>This is the content of the template</a>');
    }
    function testCtrl($templateCache,$sce) {
        var tpl = $templateCache.get('templateId.html');
        tpl = $sce.trustAsHtml(tpl);
        this.text = tpl;
    };
  }

注意：使用ng-bind-html就要使用\$sce转成受信任的html插入代码。