AngularJS ng-include 缓存答案

【问题标题】：AngularJS ng-include cachingAngularJS ng-include 缓存
【发布时间】：2016-09-22 17:48:26
【问题描述】：

我喜欢包含带有ng-include 属性的模板。我想知道模板是否在多次使用同一个 url 时被缓存。

<div ng-include src="'./Views/temp.html'"></div> //get request temp.html
<div ng-include src="'./Views/temp.html'"></div> //load from cache

【问题讨论】：

您可以使用浏览器网络捕获来检查它。对于第一个请求，状态必须为 200，如果第二个请求的状态为 304，或者我们没有第二个请求。我们可以确定模板被缓存了
我相信$templateCache 服务做到了docs.angularjs.org/api/ng/service/$templateCache
html 被缓存，不会创建额外的请求。我来到这里实际上是想找到如何克服缓存..

标签： javascript angularjs

【解决方案1】：

缓存通常使用 - 但它不是在 Angular 的部分，而是在浏览器的部分。您可以通过运行 Fiddler 并查看页面加载时发生的情况来看到这一点。如果您从服务器返回 304 结果代码，则表示该页面没有更改 - 因此将从缓存中提取。

强制重新加载

始终强制重新加载的唯一好方法是添加查询字符串，如下所示（您可以将“i”替换为您想要的任何变量，并且数字只需要是随机的 - 不是以前使用的数字）：

<div ng-include src="'./Views/temp.html?i=1000'"></div> // get request temp.html
<div ng-include src="'./Views/temp.html?i=1001'"></div> // force the page to load!

希望有帮助！

【讨论】：

其实是被 angular 缓存的，请看 $templateCache 的 angular 文档：docs.angularjs.org/api/ng/service/$templateCache
@Laurel 你是对的，但由于这是一个 javascript 缓存，只需关闭并再次打开浏览器即可清除它。另一方面，浏览器缓存只能以我上面显示的方式“自动”清除。希望这是有道理的！
我想添加一个简单的方法来完全（真正完全）在 chrome 中的网站是用 F12 打开调试控制台，然后右键单击屏幕顶部的重新加载按钮并选择最后一个选项。这是必需的，因为 Shift+F5 似乎没有清除模板缓存
另一种解决方案是通过在应用程序加载时将 HTML 片段预加载到 $templateCache 中来完全忽略浏览器缓存。这具有减少请求数量的额外好处（您甚至根本不必访问浏览器缓存）。缺点是在启动时运行更多的 JS。有用于此的 grunt 插件（如 npmjs.org/package/grunt-angular-templates），但制作自己的插件也相当简单。我们使用的是 maven，它实际上是 ~100 LOC 来制作一个插件。
要在 Chrome 中强制重新加载，您可以打开开发人员工具并从设置页面（齿轮图标）选择在开发工具打开时禁用缓存。似乎对我有用。

【解决方案2】：

就我而言，我打开了“隐身窗口”，但它仍然显示缓存版本。我检查了同样的内容，发现 .html 页面的状态为 200。

解决此问题的一个简单方法是使用“网络”选项卡中的“清除浏览器缓存”。

希望这会有所帮助！

【讨论】：

这将暂时为您解决问题，直到您进行另一项更改。您网站的公共用户不会知道这一点，他们必须等待他们的缓存失效才能看到您最近的更新。