停止在Angular.js中缓存视图

时间:2014-03-04 22:32:51

标签: javascript angularjs caching

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

我正在使用带有.net web api 2项目的angular 1.2,我的内容在index.html中提供。

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

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

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

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

3 个答案:

答案 0 :(得分:6)

由于没有人在讨论,我会发布我实施的解决方案,哪个有效,但可能会更好

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

答案 1 :(得分:0)

我发现我的生产服务器间歇性地也遇到了同样的问题。

在大多数情况下,我推送到生产服务器的代码中有80%没有问题。但是,新的模块引用,新的Angular绑定,甚至是最小的模板编辑都可以进行多次刷新,以实际清除缓存并显示最新的更新。

我实际上写了一段7段的问题斜杠声明来表达我的不满,并希望有人和我一样有同样的问题。我最后删除了这个问题,因为我担心这只是我的经历。

我找到了一个奇怪的解决方法,如果我通过在我的机器上运行'npm start'或'http-server'模块从终端托管网站,我的开发和生产服务器之间的不断更新将迫使浏览器确认这两种环境并导致更改出现在一个环境中或两者都出现。

在我看来,有两种类型的开发人员:模块化和逐行异步。

模块化程序员以大块编码,然后上传整个代码,最大限度地减少繁重的缓存。

异步程序员喜欢通过编写几行来查看他们所做的每一项更改,上传小的更改然后刷新浏览器以查看他们最新的进展细节。

我绝对是一名异步程序员。我发现它允许我捕捉较小的错误,并理解我使用的任何语言的内部运作。

说异步编程会导致繁重的浏览器缓存,这会导致我们在这个特定问题上遇到的问题吗?

很高兴分享你的盲目沮丧,因为这一直是我的一个巨大问题,因为我一直在涉及Angular。

乍一看似乎是一个小问题,但是当您正在学习Angular时,您可能会花费数小时甚至几天来重新编码相同的30行,因为您的浏览器没有任何变化。这是一个非常危险,无形的问题,可能导致大量的时间被削减开发时间。

答案 2 :(得分:-3)

可能只是在你的浏览器案例中。出于开发目的,您可以使用chrome的隐身浏览器。打开chome后使用ctrl + shift + N,它将打开隐身浏览器。