清除 Angular JS templateCache 一次（针对每个部署）

Question

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

根据标题问题，清除 $templateCache 的推荐方法是什么 "once"，例如我研究过的一些想法：

Angular 是否有检测模板文件是否已更改的内部方法？然后如果是 "update" 就可以了。
Angular 是否有内部 "version" 或 "date" 我们可以比较并添加一个条件来触发函数 removeAll()？
$templateCache 自己知道刷新吗？如果 HTML 文件必然会超时更改并提供给多个浏览器，那么 Angular 创建者强制我们使用 templateCache 的意图是什么？

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

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

Answer 1

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

所以我们的解决方案只是无聊的旧版本控制，浏览器 headers 和 non-mega-scaling 网站最容易理解，这很好。

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

How to check if a file has changed?

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

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

清除 Angular JS templateCache 一次（针对每个部署）

Clear Angular JS templateCache once (for each deployment)

javascript

angularjs

caching

deployment

refresh