ngTemplate

定义模板

客户端缓存模板

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

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

 

 

使用模板

<div ng-include="'lovestory.html'" class="well"></div>
//'lovestory.html' 模板id,字串加单引号


angular.module('myApp', [])
    .directive('templateDemo', ['$log', function($log){
        return {
        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        templateUrl: 'butterfly.html',
        replace: true,
        link: function($scope, iElm, iAttrs, controller) {}
        }
    }])

<div ng-bind-html="html"></div> //html为包含html代码的变量

 

模板查找

如果客户端找不到模板则启用ajax获取模板，如果当前页是http://127.0.0.1/index.html，则查找路径http://127.0.0.1/lovestory.html，成功获取模板后放入$templateCache中，$templateCache不刷新不会丢失

 

优点

可以在客户端一次加载所有模板，减少服务端通信

 

$templateCache

$templateCache = $cacheFactory('template');

$templateCache.put()

$templateCache.get()

$templateCache.remove()

$templateCache.removeAll()

 

 

url:https://www.zybuluo.com/bornkiller/note/6023