角模板版本

Question

我發現我的應用程序經常會出現意想不到的問題，因爲用戶在瀏覽器中緩存了模板。 我試過$window.location.reload(true)，但即使如此，chrome也提供緩存中的模板。

有沒有一個簡單的解決方案，例如像使用攔截器一樣動態添加版本查詢參數到模板URL？

Answer 1

雖然在其他類似的問題上，人們主張使用$templateCache並一次加載所有內容。這不是我尋找的解決方案，因爲它會通過增加應用程序大小並犧牲angular-ui-router提供的延遲加載來增加應用程序的首次加載時間。

所以，下面是我做的。 創建了包含版本的值提供程序。 該文件被縮小幷包含在索引頁中，因此隨頁面一起加載。

angular.module('my-app').value('version', 'X.X.X'); 

，我發現我的狀態，指示，甚至在所有templateUrl NG-包括通過$http服務加載，從而在獲取模板的時候，我可以注入一個查詢參數。所以我加了下面的應用程序的配置塊線：

angular.module('my-app').config(['$httpProvider', function($httpProvider){ 
    $httpProvider.interceptors.push(['$q', 'version', function($q, version) { 
     return { 
      'request': function (request) { 
       if (request.url.substr(-5) == '.html') { 
        request.params = { 
         v: version 
        } 
       } 
       return $q.resolve(request); 
      } 
     } 
    }]); 
}]); 

所以，我所有的模板被稱爲與版本號，現在的瀏覽器等待新的模板，如果版本增加加載。 我通過api定期檢查版本更新。如果檢測到新版本，我會提示用戶重新加載頁面。在用戶批准，我通過$window.location.reload(true)

更新

以下重裝是片段，以檢查是否有新的版本。它可以根據使用情況而有所不同。由於我們在這裏有專門的發佈週期，因此我們在每個窗口焦點和第一次加載期間檢查新版本。

angular.module('my-app').run(['$rootScope', '$window', 'version', 'configService', function($rootScope, $window, version, configService){ 
    $rootScope.checkVersion = function() { 
     configService.getVersion().then(function (data) { 
      if (data.version != version) { 
       // show user a message that new version is available 
       promptUserForReload().then(function() { 
        $window.location.reload(true); 
       }) 
      } 
     }); 
    } 

    $window.addEventListener("focus", $rootScope.checkVersion); 

    $rootScope.checkVersion(); 
}]) 

Answer 2

沒有攔截U可以只添加後修復版本變量模板URL。 templateUrl：「？腳本/應用/ blabla.html版本版本=」 +版本