angularjs - 当 AngularJS 模板在服务器上发生更改时，如何取消缓存？

Question

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

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 就有相同的版本。