The slowest part of loading a new view/state in an AngularJS application isn't waiting for paints or events listeners to be added/updated, it's waiting for the browser to reconnect to your server and download the view template for the next view. Angular kindly provides us with the $templateCache service which has a very accessible interface for storing and retrieving templates but Angular itself does not look ahead through your application to find template URLs and precache them.

Fortunately the solution to this problem is novel and just requires creating a module that takes a list of URLs to templates and goes off to fetch them in the background. So I created just that! The Angular Templateloader module is a simple module that provides an API for downloading and cacheing templates in the background. The templates are downloaded asynchronously by default to get as many as possible as quickly as possible but if you have concerns about downloading too much right away or network latency, you can set them to download only one at a time. For the template URLs, you can pass in a string, array of strings, or a full config object with the option to pass in a named hash of URLs so you can access the templates with convenient nicknames. Check out the full documentation here and make sure to read up on $templateCache if you're curious about how things work in the background.

angular  
.module('myApp', 'angular-templateloader')
.run(['templateLoader', function(templateLoader) {
  templateLoader.load({
    async: true,
    files: [
      '/partials/header.html',
      '/partials/page2.html',
      'http://othersite.com/freetemplates/foo.html'
    ]
  });
}]);

On a fast connection, cacheing future templates will reduce the loading time for a new view by about 70ms but on a slower connection, it could reduce load time by north of 2 seconds.

Version 1.0.0 of the module went up on GitHub yesterday so Happy Xmas to all!