1. 程式人生 > >AngularJs 禁止模板快取

AngularJs 禁止模板快取

因為AngularJs的特性(or 瀏覽器本身的快取?),angular預設的HTML模板載入都會被快取起來。導致每次修改完模板之後都得經常需要清除瀏覽器的快取來保證瀏覽器去獲得最新的html模板,自己測試還好,但如果更新了伺服器的模板內容,使用者可不會每個都配合你去清除瀏覽器的快取。故這還真是個大問題。

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/Book/:bookId/ch/', {
    templateUrl: 'chapter.html',
    controller: 'ChapterController'
  });
});

方法一:在模板檔案路徑後加時間戳(or 其他隨機數),強制AngularJs每次從伺服器載入新的模板
 <pre name="code" class="javascript">app.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/Book/:bookId/ch/', {
    templateUrl: 'chapter.html' + '?datestamp=' + (new Date()).getTime(),
    controller: 'ChapterController'
  });
});

不過這種方法太不美觀了。。。。

方法二:使用$templateCache清除快取

// 禁止模板快取
app.run(function($rootScope, $templateCache) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        if (typeof(current) !== 'undefined'){
            $templateCache.remove(current.templateUrl);
        }
    });
});

在配置 路由地址後,即在app.config之後新增這段程式碼,可禁止AngularJs將templateUrl快取起來。