Ranjith Ramachandra Ranjith Ramachandra - 1 month ago 10x
AngularJS Question

Is there a way to make AngularJS load partials in the beginning and not at when needed?

I have a route setup like this:

var myApp = angular.module('myApp', []).
config(['$routeProvider', function ($routeProvider) {
when('/landing', {
templateUrl: '/landing-partial',
controller: landingController
when('/:wkspId/query', {
templateUrl: '/query-partial',
controller: queryController
redirectTo: '/landing'

I want to be able to make angularjs download both the partials in the beginning and not when requested.

Is it possible?


Yes, there are at least 2 solutions for this:

  1. Use the script directive (http://docs.angularjs.org/api/ng.directive:script) to put your partials in the initially loaded HTML
  2. You could also fill in $templateCache (http://docs.angularjs.org/api/ng.$templateCache) from JavaScript if needed (possibly based on result of $http call)

If you would like to use method (2) to fill in $templateCache you can do it like this:

$templateCache.put('second.html', '<b>Second</b> template');

Of course the templates content could come from a $http call:

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

Here is the plunker those techniques: http://plnkr.co/edit/J6Y2dc?p=preview