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

Answer 1

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' })
    });

Answer 2

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

Answer 3

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 });
                }
            }
        }
    })
]);

Answer 4

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});
      }
    }
})

Answer 5

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"
            }
        );