Preloading HTML partials into AngularJS UI-Router application

Question

I notice that on a full refresh of my angular app, state transitions (I am using ui-router but then may be similar to native Angular routing as well) have a slight lag on first visit because the browser does a GET request to retrieve the HTML partial that is associated with that given state. All subsequent visits are basically instantaneous, but I want to know if there is a way to tell Angular to pre-load all the needed partials when first coming to the page?

Do they not do this because eventually too many partials would use too much bandwidth if fetched in parallel?

score 5 · Accepted Answer · answered Dec 05 '14 at 07:03

5

You could put those partials inside a script tag, and place it in your main HTML page so they're all loaded up front. You could also load them in the run block of your app, and put them in the $templateCache:

$templateCache.put('template.html', '<h1>My template</h1>');

Or get it from the server if it's not inline:

$http.get('template.html', {cache:$templateCache});

answered Dec 05 '14 at 07:03

Mohammad Sepahvand

17,364
22
81
122

Hey sorry didn't see your answer. I will probably use the latter and just GET the partials during application initialization. That makes the most sense. Thanks! – Matt Hintzke May 12 '15 at 20:59

score 5 · Answer 2 · edited May 23 '17 at 12:02

To preload templates at application initialization, you can use:

angular
.module('app')
.run(['$state', '$templateCache', '$http',
    function ($state, $templateCache, $http) {
        angular.forEach($state.get(), function (state, key) {
            if (state.templateUrl !== undefined && state.preload !== false) {
                $http.get(state.templateUrl, {cache: $templateCache});
            }
        });
    }
]);

This will preload all templateUrls by default unless preload: false is set in the state definition.

Thanks to Sobieck's answer here for the concept, which I modified for use with ui-router.

score 1 · Answer 3 · edited May 23 '17 at 12:34

Here is a solution that will do just that and will handle any defined views.

run(['$state', '$templateCache', '$http', function($state, $templateCache, $http) {
    var url;
    function preload(v){
        if(v.preload){
            if(url = v.templateUrl){
                $http.get(url, { cache: $templateCache });
            }
        }
        // state has multiple views. See if they need to be preloaded.
        if(v.views){
            for(var i in v.views){
                // I have seen views with a views property.
                // Not sure if it's standard but won't hurt to support them
                preload(v.views[i]);
            }
        }
    }
    $state.get().forEach(preload);
}])

You can easily change this to preload by default by replacing line 4 (if(v.preload){) with if(v.preload === false){.

Based on this answer.

Preloading HTML partials into AngularJS UI-Router application

3 Answers3

Linked