清除 Angular JS 模板缓存一次（针对每个部署）答案

【问题标题】：Clear Angular JS templateCache once (for each deployment)清除 Angular JS 模板缓存一次（针对每个部署）
【发布时间】：2015-08-16 20:10:03
【问题描述】：

此问题AngularJS disable partial caching on dev machine 建议使用$templateCache.removeAll() 清除缓存模板。但是，如果您只想在每个部署周期中触发一次以让访问者浏览器刷新/更新模板怎么办？我们的问题是一些浏览器没有更新模板 html 文件，我们最终会得到新的 CSS 与旧的 HTML 混合。我不希望这个函数一直触发，这会破坏缓存模板的开始（对吗？）。

根据标题问题，“一次”清除 $templateCache 的推荐方法是什么，例如我总结的一些想法：

Angular 是否有检测模板文件是否已更改的内部方法？然后如果是这样“更新”它。
Angular 是否有一个内部“版本”或“日期”，我们可以比较并添加一个触发函数 removeAll() 的条件？
$templateCache 本身是否知道刷新？如果 HTML 文件必然会随着时间的推移而变化并提供给多个浏览器，那么 Angular 创建者强迫我们使用 templateCache 的意图是什么。

我不想使用 grunt 为周期性发生的事情增加工作流开销，也不想将 html 文件模板分割成变量。 (Is this a good method for template cache busting in angular?)

我可以看到的替代方法是手动添加和删除 removeAll() 代码，这很愚蠢。

【问题讨论】：

您好，liquified，很高兴听到您设法为此找到实用的解决方案！

标签： javascript angularjs caching deployment refresh

【解决方案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();
}

How to check if a file has changed?

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

【讨论】：

【解决方案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

【讨论】：