My apologies for resurrecting an 20d old thread, but I just resolved the same problem in my project and I think it’d be nice to share it.
I started looking into this because I noticed that every template was being loaded via an XHR request whenever I switched views. As this can slow things down I wanted to prefetch & cache my templates.
Turns out there’s an excellent Gulp plugin for it: gulp-angular-templatecache
I used gulp-angular-templatecache to automatically concatenate and register all my templates in $templateCache
. I combined it with gulp-minify-html so my templates are also minified before being put in $templateCache
Install with npm install gulp-angular-templatecache gulp-minify-html --save-dev
.
Add the following task to your Gulpfile.js:
var minifyHtml = require('gulp-minify-html'),
templateCache = require('gulp-angular-templatecache');
gulp.task('cache_templates', function() {
gulp.src('www/templates/**/*.html')
.pipe(minifyHtml({empty: true}))
.pipe(templateCache({
standalone: true,
root: 'templates'
}))
.pipe(gulp.dest('www/js'));
})
This will generate a file called in www/js/templates.js
, which holds all your templates and puts them into $templateCache when loaded.
Make sure to load this templates.js
file in your index.html!
You also need to add 'templates'
to your angular.module()
definition in app.js:
angular.module('starter', [
'ionic',
'starter.controllers',
'templates' // <-- Add this line
])
That’s it!
I recommend adding the following line to your Gulp watch
task so the file is regenerated every time you save a template.
gulp.task('watch', function() {
gulp.watch('./www/templates/**/*.html', ['cache_templates']);
});
Hope this is useful