CODEWITHSUNDEEP
angularjsangularjs-ng-include
Vivendi
Vivendi

Reputation: 21007

Preload nested ng-includes

I'm using AngularJS to "include" html partials in my web app. I'm using a nested ng-include for this.

I also have an animation on the outer most ng-include. It all works fine. The only problem is that the outer ng-include template is loaded first. Then the included HTML file also has an ng-include which also loads an HTML file.

The last included HTML file causes the div to suddenly expand in size and that makes the animation look jumpy and weird.

This problem could be solved if all the nested ng-includes could be preloaded somehow. Is something like that possible in AngularJS?

The code I have looks something like this:

My main view:

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

The base-partial.html file:

<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>

The file1.html and file2.html contain forms.

But because filex.html is loaded with a delay that makes it all look jumpy. So is there a solution for this problem? Can I preload all nested ng-includes?

Upvotes: 3

Views: 1524

Answers (1)

Sunny Makani
Sunny Makani

Reputation: 61

You can use angularjs template caching service to cache your template. When boot strapping your application, put all your templates inside a cache so that it will not make XHR calls for your templates.

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

Upvotes: 5

Related Questions