每次部署后清除Angular JS的模板缓存

Question

这个问题AngularJS disable partial caching on dev machine建议使用$templateCache.removeAll()来清除缓存模板。但是，如果您只想在每次部署周期中触发一次以使访问者浏览器刷新/更新模板，该怎么办呢？我们的问题是一些浏览器没有更新模板html文件，导致新CSS与旧HTML混合。我不希望这个函数一直运行，这将从一开始就失去了缓存模板的意义（对吗？）。

根据标题问题，有没有推荐的方法可以“一次性”清除$templateCache，例如我考虑过的一些想法：

• Angular是否有内部方法来检测模板文件是否已更改？如果是，则“更新”它。
• Angular是否具有内部“版本”或“日期”，我们可以进行比较并添加条件以触发removeAll()函数？
• $templateCache是否会自己知道何时刷新？Angular创建者在强制我们使用templateCache时，HTML文件随时间而变化并提供给多个浏览器，他们的意图是什么。

我不想使用grunt为周期性发生的事情增加工作流开销，也不想将html文件模板切成变量。（这是在Angular中进行模板缓存破坏的好方法吗？）

我能看到的替代方案就是手动添加和删除removeAll()代码，但那很愚蠢。

- ericjam

---

嗨，Liquified，如果你找到了一个实用的解决方案，那就太好了，希望能听到你的回音！ - Rich

Answer 1

我们决定简单地将UNIX时间戳版本附加到更改的文件上，例如file.php?v=154325232。原因是我们实际上没有使用Angular templateCache，也就是说我们没有在templateCache中存储模板数据本身。我以为Angular会自动将任何异步加载的指令模板文件存储到templateCache中，但事实并非如此，必须显式使用templateCache来获取文件（这里有一个很好的教程https://thinkster.io/templatecache-tutorial）。

因此，我们的解决方案只是无聊的老版本控制，这对于浏览器头和非超大规模网站来说最易理解，也足够了。

$modifiedTs = filemtime($filename);
if ($modifiedTs != $lastModificationTs){
  echo "$filename?v=" . time();
}

如何检查文件是否更改？

最后我阅读了 templateCache 的方式，它不是用于在浏览器会话之间保存数据，而是一个会话期间的缓存服务。它与浏览器缓存无关，而是 Angular 内部存储它。因此，它适用于动态导航和加载 URL 的网站（即：不是真正的页面刷新而是 AJAX 技巧），这是大多数 Google 网站今天使用的方式。

• 防止 Angular 模板被浏览器缓存
• 手动清除 $templateCache 的最佳方法在 AngularJS 中

- ericjam

Answer 2

目前流行的方法是使用一个节点模块创建一个任务，将Angular模板预处理成一个文件，然后将其添加到js堆栈中。

您可以安装gulp-ng-html2js并将其设置为gulp任务。这将输出一个名为templates.js的文件，然后将其添加到头部。
https://www.npmjs.com/package/gulp-ng-html2js

然后将其作为模块依赖项在应用程序中调用。app.module('myApp',['templates']);

因此，在每次部署之前运行此gulp任务。 如果需要，可以添加缓存破坏查询字符串templates.js?v=123

- ericjam