角模板版本

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版本版本=” +版本