CODEWITHSUNDEEP
angularjsangular-ui-router
Alan2
Alan2

Reputation: 24602

Can I load my html files just once with an Angular 1.4 with ui-router application?

The application has many small HTML files. Is there some way that I can concat these together into some kind of template and had them all at one time? I'm not sure if this would be AngularJS or ui-router functionality or if that option even exists. Looked and did not so far see any examples of people doing that with ui-router. Hope to get some good feedback or some examples.

Upvotes: 0

Views: 25

Answers (1)

JB Nizet
JB Nizet

Reputation: 692151

Yes, it's possible. Suppose you have these two html files:

  • partials/foo.html, containing <h1>Hello</h1>
  • partials/bar.html, containing <h2>World</h2>

and those constitute the value of the templateUrl of two of your states.

You can generate a JS file containing that kind of code:

angular.module("templates").run(
  function($templateCache) {
    $templateCache.put('partials/foo.html', '<h1>Hello</h1>');
    $templateCache.put('partials/bar.html', '<h2>World</h2>');
  }
]);

If loaded, this JS file will thus prepopulate the cache used by angular to store the templates, and the router will thus not have to get them from the backend.

There are gulp (and probably grunt) plugins doing that for you at build time. A quick google search found this, for example: https://www.npmjs.com/package/gulp-angular-templatecache

Upvotes: 2

Related Questions