预加载嵌套的 ng-includes答案

【问题标题】：Preload nested ng-includes预加载嵌套的 ng-includes
【发布时间】：2014-09-02 12:11:53
【问题描述】：

我正在使用 AngularJS 在我的网络应用程序中“包含”html 部分。我为此使用了嵌套的ng-include。

我在最外面还有一个动画ng-include。一切正常。唯一的问题是首先加载外部ng-include 模板。然后包含的 HTML 文件还有一个 ng-include，它也加载了一个 HTML 文件。

最后一个包含的 HTML 文件导致 div 突然变大，这使得动画看起来跳跃和怪异。

如果所有嵌套的ng-includes 可以以某种方式预加载，则可以解决此问题。在 AngularJS 中是否有类似的可能？

我的代码如下所示：

我的主要观点：

<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
  <div ng-include"base-partial.html"></div>
</div>

base-partial.html 文件：

<div ng-switch="myList.type">
  <div ng-switch-when="file1">
    <div ng-include="'file1.html'"></div>
  </div>
  <div ng-switch-when="file2">
    <div ng-include="'file2.html'"></div>
  </div>
</div>

file1.html 和 file2.html 包含表单。

但是因为filex.html 加载了一个延迟，这使得它看起来很紧张。那么这个问题有解决方案吗？我可以预加载所有嵌套的ng-includes吗？

【问题讨论】：

标签： angularjs angularjs-ng-include

【解决方案1】：

您可以使用 angularjs 模板缓存服务来缓存您的模板。在引导您的应用程序时，将所有模板放入缓存中，这样它就不会对您的模板进行 XHR 调用。

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

【讨论】：