角度模板版本控制

Question

我发现我的应用程序经常出现意外问题,因为用户在浏览器中缓存了模板.我试过,$window.location.reload(true)但即使这样,chrome也会从缓存中提供模板.

有没有一个简单的解决方案,比如使用Interceptor之类的东西动态地向模板URL添加版本查询参数？

Answer 1

虽然在其他类似的问题上,人们会$templateCache一次性使用和加载所有东西.这不是我正在寻找的解决方案,因为它会通过增加应用程序大小和牺牲angular-ui-router提供的延迟加载来增加应用程序首次加载时间.

所以,下面是我做的.创建了包含版本的值提供程序.此文件缩小并包含在索引页中,因此随页面一起加载.

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

我注意到我的所有templateUrl状态,指令甚至ng-include都是通过$http服务加载的,因此在获取模板时我可以注入一个查询参数.所以我在app的配置块中添加了以下行:

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();
}])