Improve Angular JS performance

Introduction

Angular is a powerful framework which gained lot of traction in the client side development in recent years and it is fun to work with. There are lot of things I like about Angular JS. Below are my most favorites

  • Declarative Syntax
  • SPA out of the box
  • Testability
  • Dependency Injection

Recently I learned one trick which could potentially improve the Angular JS performance and I’m sharing this with you all.

Debug Data

When you are using AngularJS if you are inspecting elements in the DOM you might have seen some additional tags and classes in your DOM if you have paid attention closely.

angular js.PNG

Apparently these attributes are used by AngularJS to attach some information about binding and scopes to DOM nodes, and adds CSS classes to elements. Angular JS does this to help testing tools like Protractor and Batarang.

But when we deploy our application to production we dont need these additional debug data so we can disable it.

Disabling Debug Data

You can disable this debug data with one line of code.

 

angular
 .module('app')
 .config(function ($compileProvider) {
     $compileProvider.debugInfoEnabled(false);
 });

Summary

Even though this information is present in the official Angular JS documentation it looks like this feature is not used much. I hope this helps someone.

One thought on “Improve Angular JS performance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s