AngularJs 禁止模板缓存

因为AngularJS的特性（or 浏览器本身的缓存？），angular默认的HTML模板加载都会被缓存起来。导致每次修改完模板之后都得经常需要清除浏览器的缓存来保证浏览器去获得最新的html模板，自己测试还好，但如果更新了服务器的模板内容，用户可不会每个都配合你去清除浏览器的缓存。故这还真是个大问题。

[javascript]  view plain  copy

 

1. app.config(function($routeProvider, $locationProvider) {  
2.   $routeProvider  
3.    .when('/Book/:bookId/ch/', {  
4.     templateUrl: 'chapter.html',  
5.     controller: 'ChapterController'  
6.   });  
7. });  

方法一：在模板文件路径后加时间戳（or 其他随机数），强制AngularJs每次从服务器加载新的模板

[javascript]  view plain  copy

 

1.  <pre name="code" class="javascript">app.config(function($routeProvider, $locationProvider) {  
2.   $routeProvider  
3.    .when('/Book/:bookId/ch/', {  
4.     templateUrl: 'chapter.html' + '?datestamp=' + (new Date()).getTime(),  
5.     controller: 'ChapterController'  
6.   });  
7. });  

不过这种方法太不美观了。。。。

方法二：使用$templateCache清除缓存

[javascript]  view plain  copy

 

1. // 禁止模板缓存  
2. app.run(function($rootScope, $templateCache) {  
3.     $rootScope.$on('$routeChangeStart', function(event, next, current) {  
4.         if (typeof(current) !== 'undefined'){  
5.             $templateCache.remove(current.templateUrl);  
6.         }  
7.     });  
8. });  

在配置 路由地址后，即在app.config之后添加这段代码，可禁止AngularJs将templateUrl缓存起来。