Question

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

根据标题问题，有什么建议的方式来清除$ templateCache＆＃34;一次＆＃34;，例如我曾经讨论过的一些想法：

Angular是否有内部方法来检测模板文件是否已更改？然后如果是这样＆＃34;更新＆＃34;它。
Angular是否有内部＆＃34;版本＆＃34;或者＆＃34;日期＆＃34;我们可以比较并添加一个条件到fire函数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的好教程）。

所以我们的解决方案只是无聊的旧版本，这是浏览器标题和非超大型网站最容易理解的，很好。

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

How to check if a file has changed?

最后我读取templateCache的方式，它不打算在浏览器会话之间保存数据而是在会话期间它的缓存服务。它与浏览器缓存无关，而是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一次（对于每个部署）

2 个答案: