角度模板版本控制 [英] Angular template versioning

问题描述

我观察到，由于用户已将模板缓存在浏览器中，因此我的应用程序经常会发生意外问题. 我尝试了$window.location.reload(true)，但即使如此，chrome仍会从缓存中提供模板.

I observed that often unexpected issues occurs with my apps as the user has templates cached in browser. I tried $window.location.reload(true) but even then chrome serves templates from the cache.

是否有一个简单的解决方案，例如使用拦截器等将版本查询参数动态添加到模板URL?

Is there an easy solution for this like adding a version query parameter to template URL dynamically using something like Interceptor?

推荐答案

尽管在其他类似问题上，人们还是建议使用$templateCache并一次性加载所有内容.这不是我一直在寻找的解决方案，因为它会通过增加应用程序大小并牺牲angular-ui-router提供的延迟加载来增加应用程序的首次加载时间.

Although on other similar question people sugested to use $templateCache and load everything in one go. This isn't the solution I was looking for as it would increase app first load time by increasing app size and sacrifing on lazy loading provided by angular-ui-router.

所以，下面是我的工作. 创建了一个包含版本的值提供程序. 该文件已缩小，并包含在索引页中，因此会与该页一起加载.

So, below is what I did. Created a value provider for which contains version. This file is minified and include in index page and thus gets loaded along with the page.

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

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

I noticed that all my templateUrl in states, directives and even in ng-include is loaded via $http service and thus at time of fetching template I can inject a query parameter. So I added following lines in app's config block:

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)

So, all my templates are called with version number and now browser waits for new template to load if version is increased. I periodically check for version update via an api. And if a new version is detected, I prompt user to reload the page. On user approval, I reload it via $window.location.reload(true)

更新

以下是用于检查新版本的代码段.它可以根据使用情况而变化.由于这里有临时发布周期，因此我们会在每个窗口焦点以及首次加载期间检查新版本.

Following is snippet to check for new version. It can vary according to use case. As we have ad-hoc release cycle here, we check for new version on each window focus and also during first load.

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

这篇关于角度模板版本控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！