Searching for acceleration

Question

I am using $routeProvider in Angular. Whenever I go to particular route I see log in the console:

XHR finished loading: "http://localhost:8080/root/partials/view1.html".
XHR finished loading: "http://localhost:8080/root/partials/view2.html".
...

At this point the particular pages are cached I think in the browser and could be referenced faster. How can I make a XHRs for all my routes in the background when the Angular is referenced first time? I search for something like this:

for ( /* every page inside routeProvider */ ) {
    // XHRs the page
}

Seems to be duplicate of this http://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when/12346901#12346901 — Chandermani, Aug 28 '13 at 13:21
Seems to be similar. In other hand doesn't explain how to add whole bunch of partials (from route) to cache. I would say is more general. Edited a bit. — Knight of Ni, Aug 28 '13 at 15:01

score 3 · Answer 1 · answered Aug 28 '13 at 13:21

3

Your question is answered with examples in the documentation.

To summarise: you can inject $templateCache into your run method (possibly along with $route if you want to get all the template URLs from the route table), and insert templates into the cache.

HTH!

answered Aug 28 '13 at 13:21

Steve Klösters

9,427
2
42
53

Going through $route would be nice, but seems this requires additional ngRoute module from angular-route.js – Knight of Ni Aug 28 '13 at 14:40
In the recent versions of AngularJS, true! They've been separating functionality into modules, and I suspect they will do more and more of it! – Steve Klösters Aug 28 '13 at 16:10

score 2 · Answer 2 · answered Aug 28 '13 at 13:28

I use grunt-angular-templates for that purpose. It's a grunt task which concatenates & pre-load angular templates to $templateCache. I run it only in production mode when building project, to avoid increased build time in dev mode. You can use it as follows (assuming you use grunt):

        ...
        ngtemplates: {
            myProject: {
                options: {
                    prepend: '/',
                    concat: 'out\\app.min.js'
                },
                src: ['app/**/*.html'],
                dest: 'out/templates.js'
            }
        }
       ...

It concats all html files from app dir to templates.js and then append templates.js file to app.min.js file. In production there is only app.min.js file with all js code and templates. Works great for me (and for you it should too, assuming your js code is in reasonable size).

This is interesting. I am not using grunt, but maybe same day will make a trial. — Knight of Ni, Aug 29 '13 at 15:04

Searching for acceleration

2 Answers2