Angular 模板版本控制

Question

我观察到我的应用经常出现意外问题，因为用户在浏览器中缓存了模板。我尝试了 $window.location.reload(true) 但即便如此 chrome 也从缓存中提供模板。

是否有一个简单的解决方案，例如使用拦截器之类的东西向模板 URL 动态添加版本查询参数？

Answer 1

尽管在其他类似问题上人们建议使用 $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)

重新加载它

更新

以下是检查新版本的代码片段。它可以根据用例而变化。由于我们这里有临时发布周期，我们会在每个 window 焦点上以及在首次加载期间检查新版本。

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

如果没有拦截器，您只需将 post 修复版本变量添加到模板 url。模板网址：'scripts/apps/blabla.html?version?ver='+版本

Angular 模板版本控制

Angular template versioning

version

browser-cache

angularjs

single-page-application