Possible to populate $templateCache before defining routes?

Question

I don't wish to lazy load my route templates. Instead I want to load all my route templates into $templateCache ahead of any routes executing.

This is what I am doing:

angular.module('myApp', ['ngRoute']).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(false);

    $routeProvider.when("/main", {templateUrl: "main", controller: "MainCtrl"})
                  .when("/login",{templateUrl: "login", controller: "LoginCtrl"});
}])
.run(['$location','$templateCache', function ($location, $templateCache)
{
   //...Save templates in $templateCache
   $location.path("/login");
}]);

This works OK if you browse to / because it doesn't match any route. But if you browse or refresh on /#/login it seems the route service attempts to load the template before my run block gets to run and makes a request to the server for it.

Is there anyway to ensure the code that populates the $templateCache will execute before the route service goes looking for the template?

Answer 1

If you use grunt you I highly recommend grunt-angular-templates for that purpose, but if you don't and want to do this manually create separate module in which you have similar logic to what you have right now, something along the lines:

angular.module('myapp.templates').run(['$templateCache', function($templateCache) {
$templateCache.put(...

and then simply reference that module as your app dependency. Run block of dependency module will run first before routing logic kicks in and it's what you want.