Template Caching Ultimate Hack for Ionic Optimization

The Ionic framework is best suited for the development of Hybrid apps, it provides ultimate and great features to remove that thin like to distinguish between Native and Hybrid apps. You can visit my previous post for another useful trick for Ionic optimizations.

In this post, we will discuss Template Caching technique which we can use in our Ionic applications, which optimizes the Ionic app to great extent. This will remove fluctuations which we face when we switch from one view to other as it preloads all view in advance.

To get this done we will do the installation of gulp-angular-templatecache plugin in our Ionic app.

Here we assuming that we already installed Ionic app using

ionic start todo blank

then adding platform using

ionic platform add android

Let’s begin  ….
Go to app’s root folder then press SHIFT+Right click then select “Open command window here”.
Step 1 – Install gulp-angular-templatecache by pasting below code in CMD then hit enter.

npm install gulp-angular-templatecache –save-dev

NOTE: Here if you face error something like then you need to check if ‘gulp’ is installed on your system. If not you can install using this command npm install -g gulp

Step 2 – Add below code in gulpfile.js

var templateCache = require('gulp-angular-templatecache');
gulp.task('template', function(done){
    gulp.src('./www/templates/**/*.html')
    .pipe(templateCache({
        standalone:true,
        root: 'templates'}))
    .pipe(gulp.dest('./public'))
    .on('end', done);
});

Step 3 – Add dependency ‘templates‘ in you app.js, then it will look similar to the following code

angular.module('app', ['ionic', 'starter.controllers', 'starter.services', 'templates'])

Step 4 – Run following CMD Gulp command and template.js will generate at ./www/dist

gulp template

Now you need to include ‘template.js‘ file created in your Index.html at root of you app folder

<script src="dist/templates.js"></script>

NOTE: When ever you make any changes in you template html files you always need to run

gulp template

command to update generated ‘dist/templates.js‘

Now when ever you load you app in mobile device it will load your templates from templates.js file instead of calling HTML files from your template flder using ajax calls.
Thats all folks   …