当服务器上的AngularJS模板更改时，我该如何清除缓存？

Question

我们有一个Angular项目，由于我们的“敏捷”环境，模板已经多次更改。由于html文件类型，浏览器似乎会强烈缓存模板。这意味着当业务在更新后访问我们的开发网站时，他们偶尔会看到旧的模板。我们该如何确保当模板发生更改时，用户下载新的模板而不是从缓存中加载？

- William Neely

Answer 1

我们使用Jade，并为了防止缓存，有一个基于时间的变量会附加到我们的JS/CSS包含文件的末尾（style.css?v=2012881）。由于我们已经通过这个变量拥有了“appVersion”，所以我选择使用Angular模块和常量来公开该变量：

script.
      angular.module('appVersion',[]).constant('appVersion',#{curDate});

在我的主要Angular模块中，我有以下内容：

.config(['$httpProvider','appVersion',function($httpProvider,appVersion){
  $httpProvider.interceptors.push(function() {
      return {
       'request': function(config) {
           if(!config.cached && config.url.indexOf('.html') > -1){
            if(config.url.indexOf("?") > -1){
              config.url = config.url.replace("?","?v="+appVersion+"&");
            }
            else{
              config.url += "?v="+appVersion;
            }
           }
           return config;
        }
      };
    });
}])

由于模板是使用$http.get加载的，我添加了一个拦截器来检测请求是否为模板请求，并在请求中添加appVersion。这样，我们就可以为CSS、JS和HTML使用相同的版本控制。

- William Neely

Answer 2

使用像grunt-filerev这样的工具（https://github.com/yeoman/grunt-filerev）进行静态修订。它们基本上会添加文件内容哈希，从而使缓存变得不可能。

- kensplanet