Could I set up Ionic in such a way that it downloads an entire SPA upfront?

I believe Ionic caches templates used when navigating from page to page in a SPA. Could I get Ionic to eagerly load/cache all the templates in my single page app? Also, could I default to using the cached version instead of checking for a new version? The idea is that I want the app to be usable in a disconnected state after they navigate to it in a web browser once. (I don’t want the user to have to go to every page before they lose connection)

I originally wanted to wrap Ionic with Cordova and deploy it to a phone as a native application. However, since I’m not using any features that require it to be a native app, I could simply expose my app as a website for now. Our target audience is often without cellphone service, so it needs to be usable in a disconnected state.

1 Like

You could always include all your templates as inline script, like we do in our codepen samples.

1 Like

Could look into this.$templateCache

EDIT: Could take something like this and abstract it into a factory…

var templates = [

	var template = templates[i];
	if ($templateCache.get(template)){
		return; //prevent the prefetching if the template is already in the cache
	$http.get(template).success(function (t) {
		$templateCache.put(template, t);

That makes a lot of since to me. I like the simplicity of it. I could easily set up a release automation script to append all the template files inside of script tags in my index’s body. I may try working with the templateCache first as @andrewmcgivery suggested as well because that solution has it’s own benefits.

Thank you for the ideas.

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 :smile:

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() {
    .pipe(minifyHtml({empty: true}))
      standalone: true,
      root: 'templates'

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', [
  '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() {'./www/templates/**/*.html', ['cache_templates']);

Hope this is useful :slight_smile:


How do you reference a specific template that is in the templates.js($templateCache) folder inside ui-router?

I have templateURL: ‘templatename.html’ there but I get a blank page with no errors in the Chrome debugger console.

1 Like

Thanks that helps a lot.

I haven’t used gulp before so it took me a while to figure out how to get it running. For others:

either run gulp cache_templates in the command line,
or set up ionic to use gulp (if you use saas, it already does):

Hope that helps.

1 Like