我观察到，由于用户在浏览器中缓存了模板，因此我的应用程序经常会出现意外问题。
我尝试了$window.location.reload(true)，但即便如此，chrome 也会从缓存中提供模板。
是否有一个简单的解决方案，例如使用 Interceptor 等动态向模板 URL 添加版本查询参数？
【问题讨论】：
标签： angularjs version single-page-application browser-cache
尽管在其他类似问题上，人们建议使用$templateCache 并一次性加载所有内容。这不是我一直在寻找的解决方案，因为它会通过增加应用程序大小并牺牲 angular-ui-router 提供的延迟加载来增加应用程序的首次加载时间。
所以，下面是我所做的。 创建了一个包含版本的值提供者。 该文件被缩小并包含在索引页面中，因此与页面一起加载。
angular.module('my-app').value('version', 'X.X.X');
我注意到状态、指令甚至 ng-include 中的所有 templateUrl 都是通过 $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)重新加载它
更新
接下来是 sn-p 来检查新版本。它可以根据用例而有所不同。由于我们在这里有临时发布周期，因此我们会在每个窗口焦点以及首次加载期间检查新版本。
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();
}])
【讨论】：
如果没有拦截器，您只需将 post fix 版本变量添加到模板 url。 templateUrl:'scripts/apps/blabla.html?version?ver='+version
【讨论】：