预加载嵌套的ng-includes

Question

我正在使用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吗？

Answer 1

您可以使用angularjs模板缓存服务来缓存模板.当启动应用程序时,将所有模板放在缓存中,这样就不会对模板进行XHR调用.

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