码迷,mamicode.com
首页 > 其他好文 > 详细

ngTemplate

时间:2015-06-25 22:57:25      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

定义模板

客户端缓存模板

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);               
   }])


<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) {}
        }
    }])

 

模板查找

如果客户端找不到模板则启用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

ngTemplate

标签:

原文地址:http://www.cnblogs.com/yfann/p/4601071.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!