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

ID : 20296

viewed : 5

Tags : angularjsangularjs

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

vote vote

96

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

vote vote

90

If you use Grunt to build your project, there is a plugin that will automatically assemble your partials into an Angular module that primes $templateCache. You can concatenate this module with the rest of your code and load everything from one file on startup.

https://npmjs.org/package/grunt-html2js

vote vote

75

Add a build task to concatenate and register your html partials in the Angular $templateCache. (This answer is a more detailed variant of karlgold's answer.)

For grunt, use grunt-angular-templates. For gulp, use gulp-angular-templatecache.

Below are config/code snippets to illustrate.

gruntfile.js Example:

ngtemplates: {   app: {                     src: ['app/partials/**.html', 'app/views/**.html'],     dest: 'app/scripts/templates.js'   },   options: {     module: 'myModule'   } } 

gulpfile.js Example:

var templateCache = require('gulp-angular-templatecache'); var paths = ['app/partials/.html', 'app/views/.html'];  gulp.task('createTemplateCache', function () { return gulp.src(paths)     .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'}))     .pipe(gulp.dest('app/scripts'));     }); 

templates.js (this file is autogenerated by the build task)

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"... 

index.html

<script src="app/scripts/templates.js"></script> <div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div> 
vote vote

63

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: Vojta Jina's Gist

Its the $http.get that should be changed to use your bundle file:

allTplPromise = $http.get('templates/templateBundle.min.html').then( 

Your routes templateUrl should look like this:

        $routeProvider.when(             "/about", {                 controller: "",                 templateUrl: "about.html"             }         ); 
vote vote

60

If you use rails, you can use the asset pipeline to compile and shove all your haml/erb templates into a template module which can be appended to your application.js file. Checkout http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

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

Related QUESTION?