javascript 停止缓存 Angular.js 中的视图

stop caching views in Angular.js

提问by Sonic Soul

for some reason all of my html seems to be 100% cached in chrome.

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

I am using angular 1.2 with .net web api 2 project, and my content is served in index.html.

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

I did not make any cache policy changes yet, but it seems to be caching everything very heavily.

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

none of the changes i make (to the views) are reflected until i clear browser cache.

在我清除浏览器缓存之前，我所做的任何更改（对视图）都不会反映出来。

I don't see new changes after pressing f5 or after publishing my site to the server and doing f5 on that. I have to either explicitly clear browser cache, or keep console open with "no caching while dev tools are open" setting on.

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

I want to prevent asking users to clear their browser cache when new versions are deployed.

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

回答by Sonic Soul

Since noone is chiming in, i'll post the solution I implemented, which works, but could be better

由于没有人插话，我将发布我实施的解决方案，该解决方案有效，但可能会更好

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:

索引.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)

this works, but I'd prefer to strike a better balance of caching between releases.

这有效，但我更愿意在版本之间取得更好的缓存平衡。

Alternative approach would be to use a build tool such as Grunt, and generate unique filenames for your scripts in production and update links in index.html. This would be the best approach I believe, because full caching would be enabled, and browser would always make the request for new version of files since the names would be unique. (I've also seen people append ?v=666 to files, but from what i've read this is not a reliable approach)

另一种方法是使用诸如 Grunt 之类的构建工具，并为生产中的脚本生成唯一的文件名并更新 index.html 中的链接。我相信这将是最好的方法，因为将启用完全缓存，并且浏览器将始终请求新版本的文件，因为名称将是唯一的。（我还看到人们将 ?v=666 附加到文件中，但从我读到的内容来看，这不是一种可靠的方法）

Also if you're serving content from .Net pages (instead of basic .html) you have an option of using Bundler which does manage tags between releases.

此外，如果您从 .Net 页面（而不是基本的 .html）提供内容，您可以选择使用 Bundler，它可以管理版本之间的标签。

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

this will result in

这将导致

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

update

更新

additionally I've also been adding a version parameter in template includes. This prevents caching, but it may prevent caching completely so do some testing if you go that route

另外我还在模板包含中添加了一个版本参数。这可以防止缓存，但它可能会完全阻止缓存，所以如果你走那条路，请做一些测试

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

appVersion can be a global variable set in app.js

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

回答by Mindsect Team

I have found I have the same issue intermittently with my production server as well.

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

In most instances, 80% of the code that I push to the production server has no problems. However, a new module reference, a new Angular binding, or even the smallest template edit can take several refreshes to actually clear the cache and show the latest updates.

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

I actually wrote a 7 paragraph question slash statement to air my grievances and hoping someone had the same issue as myself. I ended up deleting the question, as I feared it was just my experience.

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

I have found a weird workaround, where if I host the site from the terminal by running either 'npm start' or 'http-server' modules on my machine, the constant update between both my development and production server will force the browser to acknowledge both environments and cause the change to either appear in one environment or both.

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

In my opinion, there are two types of developers: modular and line-by-line asynchronous.

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

Modular programmers code in large chunks and then upload the entire code effort which minimizes heavy caching.

模块化程序员编码成大块，然后上传整个代码工作，最大限度地减少大量缓存。

Asynchronous programmers like to view every single change they make by coding a couple of lines, uploading the small changes and then refreshing the browser to see their latest nuance of progression.

异步程序员喜欢通过编写几行代码、上传小的更改然后刷新浏览器来查看他们最新进展的细微差别来查看他们所做的每一个更改。

I am definitely an asynchronous programmer. I find it allows me to catch smaller mistakes as well as understand the inner workings of whichever language I am using.

我绝对是一个异步程序员。我发现它可以让我发现更小的错误并理解我使用的任何语言的内部运作。

Is it safe to say that asynchronous programming leads to heavy browser caching, which is leading to the problem we are all having on this particular question?

可以肯定地说异步编程会导致大量的浏览器缓存，从而导致我们在这个特定问题上遇到的问题吗？

Glad to share in your blind frustration, as this has been a huge problem of mine, ever since I've been dabbling in Angular.

很高兴分享你的盲目沮丧，因为自从我涉足 Angular 以来，这一直是我的一个大问题。

It may at first glance appear to be a small issue, however as you are learning Angular, you may spend hours or even a couple of days recoding the same 30 lines because there was no change in your browser. This is a very dangerous, invisible issue which can lead to large amounts of time being chipped away for development time.

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

回答by Anita

May be its just in your browser case. For development purpose you can use chrome's incognito browser. Use ctrl+shift+N after opening chome, it'll open incognito browser.

可能只是在您的浏览器情况下。出于开发目的，您可以使用 chrome 的隐身浏览器。打开 chome 后使用 ctrl+shift+N，它将打开隐身浏览器。