AngularJS：什么是 $templateCache？答案

【问题标题】：AngularJS: what is $templateCache?AngularJS：什么是 $templateCache？
【发布时间】：2014-10-11 10:35:05
【问题描述】：

在分析大型 AngularJS 应用程序时，我开始跟踪 $templateCache。

https://docs.angularjs.org/api/ng/service/$templateCache

这个对象是什么？它是否存储部分存储在磁盘上或路由中最终呈现的 HTML？

我已经在我的控制器中添加了一些这样的代码，以确保它不会持久化任何东西：

$scope.$on('$destroy', function cleanup() { $templateCache.removeAll(); });

编辑：我正在研究这个的原因是一个（不是每个）控制器正在加载一个很大的部分，其中有几个循环，这取决于用户输入，它可能是大约 100 个输入具有大型 <select> 语句和许多自定义指令的字段。客户要求采用这种方式，我想确保所有这些都在路由期间得到处理。

为了澄清这个问题：$templateCache 只存储出现在磁盘上的部分，没有存储路由或渲染信息？

【问题讨论】：

“出现在磁盘上”是什么意思？如果您的意思是“文件中的原样”，那么-是的。它不保存编译模板，它只保存从 XHR 请求返回的内容。
是的，“在文件中”。我认为这回答了我的问题。我相信渲染后的表单会以某种方式缓存在其他地方。

标签： javascript angularjs templates caching partials

【解决方案1】：

默认情况下，在加载模板时，Angular 会在 $templateCache 内部查找，并在其本地 $templateCache 中找不到模板时通过 XHR 获取模板。当 XHR 请求缓慢或我们的模板足够大时，会严重影响最终用户的体验。我们可以通过将模板缓存包装到 JavaScript 文件中并将 JavaScript 文件与应用程序的其余部分一起发送来伪造模板缓存加载，而不是获取模板 XHR。

示例：

angular.module('myApp')
.run(['$templateCache', function($templateCache) {
$templateCache.put('xyz.html', ...);
}]);

所以，除非您非常确定要从 $templateCache 中删除缓存的模板，否则不要这样做。

【讨论】：

【解决方案2】：

如果我没记错的话，它是一个保存部分的对象。当向任何 html 文件（通过路由、指令或包含）发出请求时，Angular 会首先查看 $templateCache，如果所需的文件不存在，它将对其发出请求并将其放入缓存中。但是，如果它确实存在，则从那里获取。因此，如果您每页使用指令 100 次，它只会对您的指令文件发出一次请求，或者如果您在应用程序中来回导航，它不会请求已加载的文件。

在每个控制器上添加$templateCache.removeAll(); 是否有意义？只有当它是非常小的应用程序时，否则我建议不要乱用它..

【讨论】：