AngularJS ng-include缓存

Question

我喜欢使用带有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

- MR.ABC

---

如果第一个请求的状态为200，而第二个请求的状态为304或者我们没有第二个请求，那么我们可以确定该模板已被缓存。 - Khanh TO

我相信$templateCache服务可以实现这个功能。http://docs.angularjs.org/api/ng/service/$templateCache - Chandermani

HTML已被缓存，不会创建额外的请求。我来这里实际上是想找到如何克服缓存的方法。 - chesscov77

Answer 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!

希望这能有所帮助！

- drew_w

---

实际上，这是由Angular进行缓存，请参见Angular文档中的$templateCache：https://docs.angularjs.org/api/ng/service/$templateCache - Laurel

@Laurel你说得对，但由于这是javascript缓存，只需关闭并重新打开浏览器即可清除它。另外，浏览器缓存只能以我上面展示的方式“自动”清除。希望这样说得明白！ - drew_w

我想添加一个简单的方法，在Chrome中完全（真正完全地）加载网站的方法是通过按F12打开调试控制台，然后右键单击屏幕顶部的刷新按钮，选择最后一个选项。这是必需的，因为Shift + F5似乎不能清除模板缓存。 - Patrick

另一种解决方案是在应用程序加载时将HTML片段预加载到$templateCache中，完全忽略浏览器缓存。这样做的额外好处是减少请求数量（您甚至不必访问浏览器缓存）。缺点是在启动时运行更多的JS。有一些grunt插件可以实现这个功能（例如https://www.npmjs.org/package/grunt-angular-templates），但是自己制作也相当简单。我们使用的是maven，制作一个插件只需要大约100行代码。 - ivarni

要在Chrome中强制重新加载，您可以打开开发人员工具，并从设置页面（齿轮图标）选择在dev-tools打开时禁用缓存。对我来说似乎有效。 - Julian Mann

Answer 2

在我的情况下，我打开了“隐身窗口”，但仍然显示缓存版本。我检查了一下，发现.html页面的状态码是200。

克服这个问题的一个简单方法是在“网络”选项卡中使用“清除浏览器缓存”。 希望这可以帮助你！

- Kapil Lohakare

---

这将暂时为您解决问题，直到您进行另一个更改。站点的公共用户将不知道此事，并且必须等待其缓存失效后才能看到最新的更新。 - Tuesdave