Is there a way to make AngularJS load partials in the beginning and not at when needed?
Yes, there are at least 2 solutions for this:
- Use the
script
directive (http://docs.angularjs.org/api/ng.directive:script) to put your partials in the initially loaded HTML - 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
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
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>