Is there a way to preload templates when using AngularJS routing?

Question

After the Angular app is loaded I need some of the templates to be available offline.

Something like this would be ideal:

$routeProvider
  .when('/p1', {
    controller: controller1,
    templateUrl: 'Template1.html',
    preload: true
  })

Sobieck00 gives the best answer on here which matches the original question stackoverflow.com/a/23522925/956658 — Dreamwalker
– Dreamwalker, Commented Jun 20, 2014 at 13:13

andersh · Accepted Answer · 2014-04-07 09:05:00Z

57

This is an addition to the answer by @gargc.

If you don't want to use the script tag to specify your template, and want to load templates from files, you can do something like this:

    myApp.run(function ($templateCache, $http) {
        $http.get('Template1.html', { cache: $templateCache });
    });

    myApp.config(function ($locationProvider, $routeProvider) {
        $routeProvider.when('/p1', { templateUrl: 'Template1.html' })
    });

edited Apr 7, 2014 at 9:05

answered Sep 10, 2013 at 13:21

andersh

8,4336 gold badges43 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

garst Over a year ago

by the way, $http.get('Template1.html', {cache: $templateCache}); should have the same effect. Although, it does not really make much of a difference :)

andersh Over a year ago

This is definitely a simpler alternative than what I suggested. Thanks again :)

Daniel Buckmaster Over a year ago

I prefer this solution as it doesn't require building a JavaScript file from HTML templates.

GomuGomuNoRocket Over a year ago

this line " $http.get('Template1.html', { cache: $templateCache });" also means that you add it to angular cache?

Stif Over a year ago

I've tried this out, but since the http.get is asynchronous my template hasn't been loaded yet on the point where I acutally need it. Anyone know how to work around that?

|

garst · Accepted Answer · 2013-09-10 09:41:42Z

45

There is a template cache service: $templateCache which can be used to preload templates in a javascript module.

For example, taken from the docs:

var myApp = angular.module('myApp', []);
  myApp.run(function($templateCache) {
  $templateCache.put('templateId.html', 'This is the content of the template');
});

There is even a grunt task to pre-generate a javascript module from html files: grunt-angular-templates

Another way, perhaps less flexible, is using inline templates, for example, having a script tag like this in your index.html:

<script type="text/ng-template" id="templates/Template1.html">template content</script>

means that the template can be addressed later in the same way as a real url in your route configuration (templateUrl: 'templates/Template1.html')

answered Sep 10, 2013 at 9:41

garst

6,0621 gold badge31 silver badges24 bronze badges

5 Comments

andersh Over a year ago

Thanks, just what I was looking for! I would really like being able to specify the template file in $templateCache.put(), the script tag alternative messes up my IDE, and I'm not using grunt. I ended up using $http. See my own answer for details.

derrylwc Over a year ago

I haven't tested that Grunt plugin yet but ... does it include controllers as well? Or just the templates? Might be nice to preload everything possible, for loading views quickly. Thanks!

elkelk Over a year ago

+1 for the Inline templates. The inline templates allow for faster initial load, but with the flexibility of replacing the content later.

andreas Over a year ago

@derrylwc: I am struggling with the opposite problem in the moment. I have an project, created with a grunt generator (grunt-angular-fullstack), which automatically includes and configures a lot of grunt tasks. One of them is grunt-angular-templates. As I want to intercept the loading from the server with my authentication framwork, I need the request to the server, but I do not get them. So yes, it also prloads the controller.js files.

Blaise Over a year ago

In case your template needs to be fetched from a URL: myApp.run(function($templateRequest) { $templateRequest('/url/to/template.html', true); });

score 28 · Accepted Answer · 2014-05-07 16:33:12Z

28

I think I have a slightly improved solution to this problem based on Raman Savitski's approach, but it loads the templates selectively. It actually allows for the original syntax that was asked for like this:

$routeProvider.when('/p1', { controller: controller1, templateUrl: 'Template1.html', preload: true })

This allows you to just decorate your route and not have to worry about updating another preloading configuration somewhere else.

Here is the code that runs on start:

angular.module('MyApp', []).run([
    '$route', '$templateCache', '$http', (function ($route, $templateCache, $http) {
        var url;
        for (var i in $route.routes) {
            if ($route.routes[i].preload) {
                if (url = $route.routes[i].templateUrl) {
                    $http.get(url, { cache: $templateCache });
                }
            }
        }
    })
]);

edited May 7, 2014 at 16:33

answered May 7, 2014 at 16:09

user2740086

8 Comments

Anticom Over a year ago

I would change it slightly to only not preload, if there's an explicit preload: false so the preloading is enabled for a route by default. But I think that descision is personal taste and depends on what you want to do. Besides that great snippet! +1

user2740086 Over a year ago

When I wrote that I was just wanting to load two routes out of about 20 or so. So, the explicit preload: true worked a little better for me.

Fernando Silveira Over a year ago

This is by far the best answer.

user1455719 Over a year ago

I am very glad to find your response here..I been strugling to find a way to cache my templates..thanks

Knyri Over a year ago

If, like me, you got here looking for a solution using uiRouter and like this idea: try this. It will load the template for the state and any views it has defined.

|

Raman Savitski · Accepted Answer · 2014-04-01 12:58:35Z

18

Preloads all templates defined in module routes.

angular.module('MyApp', [])
.run(function ($templateCache, $route, $http) {
    var url;
    for(var i in $route.routes)
    {
      if (url = $route.routes[i].templateUrl)
      {
        $http.get(url, {cache: $templateCache});
      }
    }
})

edited Apr 1, 2014 at 12:58

answered Feb 6, 2014 at 11:41

Raman Savitski

1781 silver badge5 bronze badges

2 Comments

Lester Over a year ago

What happen if the content of the template changes dynamically? Is this showed properly or will show the same content as it comes from the cache?

Raman Savitski Over a year ago

If content is dynamic - there is no sense to "preload" it. Or I don't understand your case.

Spudley · Accepted Answer · 2014-02-03 11:00:30Z

0

if you wrap each template in a script tag, eg:

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

Concatenate all templates into 1 big file. If using Visual Studio 2013,Download Web essentials - it adds a right click menu to create an HTML Bundle

Add the code that this guy wrote to change the angular $templatecache service - its only a small piece of code and it works :-)

https://gist.github.com/vojtajina/3354046

Your routes templateUrl should look like this:

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

edited Feb 3, 2014 at 11:00

Spudley

169k39 gold badges240 silver badges309 bronze badges

answered Feb 3, 2014 at 10:42

Simon Dowdeswell

1,08111 silver badges23 bronze badges

Collectives™ on Stack Overflow

Is there a way to preload templates when using AngularJS routing?

5 Answers 5

6 Comments

5 Comments

8 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

5 Comments

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related