[AngularJS] 5 simple ways to speed up your AngularJS application

Nowdays, Single page apps are becoming increasingly popular among the fornt-end developers. It is the time to say goodbye with refreshing the whole page due to clicking on a single link. It helps to speed up out web application and improve our use experience. Today we‘d talk about how to speed up your AngularJS application. This article is based on AngularJS 1.3.x version.

1. Disabling the debug info

Javascript:

app.controller(‘AppController‘,  function () {
  this.appCtrl = this;

  appCtrl.message = "Hello World!";
});

HTML:

<p>{{appCtrl.message}}</p>

Once compiled, we get something like this:

<p class="ng-binding">Hello World!</p>

This debug info is super useful when you debuggin because the tools like Protractor and Batarang which can rely on this information. However, great things always come with cost. When our project comes to production, those information is useless to users. And additional properties and classes that are added to the DOM also come with a performance cost depending on how much is stored on the scope and DOM operations are expensive anyway.

AngularJS 1.3 enables us to switch those debug information, what you need to do to disable the debug info:

app.config(function( $compileProvider ) {

    $compileProvider.debugInfoEnabled(false);
});

To enable it again, you can do in console:

angular.reloadWithDebugInfo();

2. Use $applyAsync

Sinlge $http request triggers $digest() which can help to update application model and DOM. If you have many $http requests triggered almost at the same time and each request will run $digest() which cost a lot.

The idea to use $applyAsync is to compile multiple $http requets into one $digest. We show how to use this here:

app.config(function($httpProvider) {

    $httpProvider.useApplyAsync(true);
});

3. Using one time binding

You can see the demo here: http://jsbin.com/dijeno/9/edit?html,css,js,output

The way to use one time binding is quite simple, from our first simple of AppController, we know that everytime appCtrl.message changes, {{appCtrl.message}} will also change. So if we apply the one-time expression to our example above, we change this:

<p>{{::appCtrl.message}}</p>

4. Using lazy loading

There are many ways to do lazy loading, for example RequireJS, the one which I often use is called ocLazyLoad. It is quite easy to use with AngularJS.

What you need to do first is install ocLazyLoad:

bower install oclazyload

Then inject into the application dependency:

var app = angular.module("demo", ["oc.lazyLoad"])

Javascript: When you click on the AppCtrl, we want to load everything related to the store module.

    app.controller("AppCtrl", function($ocLazyLoad) {

        var app = this;
        app.click = function() {
            $ocLazyLoad.load({
                name: "store",
                files: [
                    "app/store/store.js",
                    "app/store/store.tpl.html",
                    "app/css/store.css"
                ]
            })
        }
    })

5. Resolve data beforehand

Controller Way:

function MainCtrl(SomeService) {

    var mainCtrl= this;

    // unresolved
    mainCtrl.something;

    // resolved asynchronously
    SomeService.doSomething().then(function(response) {
        mainCtrl.something = response;
    });

}

angular.module(‘app‘, [])
    .controller(‘MainCtrl‘, MainCtrl);

Route Resolve:

// config with resolve pointing to relevant controller
function config ($routeProvider) {
  $routeProvider
  .when(‘/‘, {
    templateUrl: ‘views/main.html‘,
    controller: ‘MainCtrl‘,
    controllerAs: ‘main‘,
    resolve: MainCtrl.resolve
  });
}
// controller as usual
function MainCtrl (SomeService) {
  // resolved!
  this.something = SomeService.something;
}
// create the resolved property
MainCtrl.resolve = {
  doSomething: function (SomeService) {
    return SomeService.doSomething();
  }
};

angular
  .module(‘app‘)
  .controller(‘MainCtrl‘, MainCtrl)
  .config(config);

For controller activate:

• Views load right away
• The Service code executes after the controller code
• Animation can be shown during the view transition

For route resolve

• The code executes before the route via a promise
• Resolve makes the new view wait for the route to resolve
• Animation can be shown before the resolve and through the view transition

Resolve happens before your controller will instantiate, and your template will load and everything will set up. It gives users a felling that they can wait less time to get the interface updated, because all the data are already resolved (parpared) for interface to use.