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