Prefetching Ionic App Templates

posted in: Uncategorized | 2

Update: Since the writing of this article, template caching has been built into Ionic. This post remains for historical and learning purposes.

When building Ionic apps, one easy way to keep your project organised is to have all of your views (templates) in separate .html files, typically in a /templates folder. One side effect of this method is that Angular has to make a HTTP request for each one of these templates on the fly as a user moves throughout your app. This can cause some latency in your app between views that can become a performance bottleneck that is noticeable by your user if your application has a lot of views.

Template Caching

One great solution to this problem is to take advantage of Angular’s $templateCache service. By default, this engine works in the background by caching templates as they are loaded for the first time in your app. You can override this behavior using Template Prefetching.

Template Prefetching

prefetch (verb) prēˈfeCH/
transfer (data) from main memory to temporary storage in readiness for later use.

The idea behind prefetching is to cache resources that you know you will need before you need them. In this case, we want to cache all of our views (templates) into the Angular $templateCache when our app starts up. This will save time and processing later when the user is navigating the app as Angular will already have the templates in memory, and won’t have to fire HTTP requests for them on the fly.

The Code

So the basic idea is to use $templateCache.get to first make sure it isn’t already cached, grab the contents of the template using $http, and then put in into cache using $templateCache.put.

var templates = [
	"page.html",
	"page2.html"
];

for(i=0;i<templates.length;i++){
	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);
	});
}

In this code, we loop through all templates (provided in an array), and for each one, if it is already in the cache, don’t do anything. If it isn’t already in the cache, grab the template file via $http and put it into the template cache. This code could be included into your Angular.run function or better yet abstracted into a factory/service.

Conclusion

Using some simple caching that is already built into Angular, you can decrease the load on your app between views to help achieve a truly native experience, and a beautiful Ionic app.

Further Reading

Lazy prefetching of AngularJS partials (Another interesting Article and partial inspiration for this one)
Original Question on Ionic Forums (Inspiration for this post)

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

2 Responses

  1. Hi there,
    I don’t see Ionic’s view cache with same functionality has template-caching. Are you sure Ionic has incorporate the behavior of preloading all templates ahead of time ? I think Ionic’s cache is only for avoiding loading the view twice, but still needs a http request on the first load (what is avoidable with template-caching).

Leave a Reply