标签:
定义模板
客户端缓存模板
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
标签:
原文地址:http://www.cnblogs.com/yfann/p/4601071.html