停止在Angular.js中缓存视图

Question

出于某种原因,我的所有html似乎都是100%缓存在chrome中.

我使用角度1.2与.net web api 2项目,我的内容在index.html中提供.

我还没有进行任何缓存策略更改,但它似乎正在大量缓存所有内容.

在我清除浏览器缓存之前,我所做的任何更改都没有(对视图).

按f5或将我的站点发布到服务器并执行f5之后,我没有看到新的更改.我必须明确清除浏览器缓存,或者保持控制台打开,并且"开启开发工具时没有缓存"设置.

我想阻止在部署新版本时要求用户清除浏览器缓存.

Answer 1

既然没有人在喋喋不休,我会发布我实施的解决方案,哪个有效,但可能更好

IIS:

http features > http response headers > set custom headers > Expire Web Content: Immediately
(if you don't see http features, you'll have to add the feature to your iis server)

index.html的:

<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="CACHE-CONTROL" content="NO-STORE"> 
(these may cause issues in older versions of IE)

这是有效的,但我更愿意在版本之间实现更好的缓存平衡.

替代方法是使用诸如Grunt之类的构建工具,并为index.html中的生产和更新链接生成脚本的唯一文件名.这将是我认为最好的方法,因为将启用完整缓存,并且浏览器将始终请求新版本的文件,因为名称将是唯一的.(我也看到人们追加？v = 666到文件,但从我读过的这不是一个可靠的方法)

此外,如果您从.Net页面(而不是基本.html)提供内容,您可以选择使用Bundler来管理版本之间的标记.

bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular/angular.js")
                                                 .Include("~/Scripts/angular/angular-route.js"));

这将导致

<script src="/bundles/angular?v=20LMOimhsS0zmHdsbxeBlJ05XNyVXwPaS4nt3KuzemE1"></script>

更新

另外我还在模板中添加了一个版本参数.这可以防止缓存,但它可能会完全阻止缓存,因此如果你走这条路线就做一些测试

<div data-ng-include=" 'app/import/import-summary.html?v=' + appVersion "></div>

appVersion可以是app.js中设置的全局变量

app.run(['$route', '$rootScope', function ($route, $rootScope) {
    $rootScope.appVersion = getBuildVersion(); // this can be read from assembly file version or any other place where versions are generated by your build server
}]);