如何在服务器上更改时缓存AngularJS模板？

Question

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

Answer 1

我们使用Jade并防止缓存，我们有一个基于附加到我们的JS/CSS包含（style.css？v = 2012881）结尾的时间的变量。由于我们已经通过这个变量的“appVersion”，我选择了使用角模块，并不断暴露变量：

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

在我的主角度模块我有：

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

Answer 2

使用类似grunt-filerev（https://github.com/yeoman/grunt-filerev）的工具进行静态修订。他们基本上添加了一个文件内容哈希，所以缓存变得不可能。