如何在服務器上更改時緩存AngularJS模板？

Question

由於我們的「敏捷」環境，我們有一個Angular項目，模板已經改變了很多次。由於html文件類型，瀏覽器似乎強烈緩存模板。這意味着當業務在更新後進入我們的開發站點時，他們偶爾會看到舊的模板。我們如何確保在對模板進行更改時，用戶下載新模板而不是從緩存中加載？

Answer 1

我們使用Jade並防止緩存，我們有一個基於附加到我們的JS/CSS包含（style.css？v = 2012881）結尾的時間的變量。由於我們已經通過這個變量的「appVersion」，我選擇了使用角模塊，並不斷暴露變量：

script. 
     angular.module('appVersion',[]).constant('appVersion',#{curDate}); 

在我的主角度模塊我有：

.config(['$httpProvider','appVersion',function($httpProvider,appVersion){ 
    $httpProvider.interceptors.push(function() { 
     return { 
     'request': function(config) { 
      if(!config.cached && config.url.indexOf('.html') > -1){ 
      if(config.url.indexOf("?") > -1){ 
       config.url = config.url.replace("?","?v="+appVersion+"&"); 
      } 
      else{ 
       config.url += "?v="+appVersion; 
      } 
      } 
      return config; 
     } 
     }; 
    }); 
}]) 

由於模板使用$ http.get加載，我添加了一個攔截器，用於檢測請求是否爲模板請求，如果是，則將appVersion附加到請求。這樣我們對CSS，JS和HTML有相同的版本。

Answer 2

使用類似grunt-filerev（https://github.com/yeoman/grunt-filerev）的工具進行靜態修訂。他們基本上添加了一個文件內容哈希，所以緩存變得不可能。