Disable Debug Data

Disabling Debug Data in Angular

Click Here for TL;DR

Like most frameworks out there Angular has certain methods/procedures for getting your application ready for production. Some of those methods include Strict Dependency Injection Mode, Disabling Debug Data, and more. On this post we will focus on Disabling Debug Data.

Disabling Debug Data

“By default AngularJS attaches information about scopes to DOM nodes, and adds CSS classes to data-bound elements.”

You may noticed while viewing the source of your web app built with Angular that many of your DOM elements have the class ng-scope added to them. This is something Angular does when the compiler creates a new scope by either ngBind or double mustache interpolation {{.....}} Below is an example of a portion of the DOM tree from an angular application.

1
2
3
    <p class="ng-scope">Some text here</p>
    <p class="ng-scope">Some more text here</p>
    <p class="ng-scope">And finally here is some text</p>

So, why are we talking about this? When you disable debug data in Angular these ng-scope classes are not added to elements. Removing these from all elements allows for a potentially tremendous gain in the load times and operational times of your application.

Why Exactly?

Every time the Angular compiler reaches a directive in your application (a directive can be an element, attribute, class, or comment) it stops, runs the logic of that directive and manipulates the DOM accordingly.

For example lets say you have the following code:

1
2
3
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>

When the Angular compiler reaches this directive (attribute of ng-repeat) it will generate new DOM elements accordingly:

1
2
3
4
5
6
    <ul>
        <li>Basketball</li>
        <li>Baseball</li>
        <li>Football</li>
        <li>Soccer</li>
    </ul>

While these new DOM elements are being built out there is milliseconds of time that is lost while the work is done.

The same philosophy can be applied every time Angular reaches a ng-scope. Work is done and time is lost. By disabling debug data you remove all of these directives, therefore speeding up your application.

How To Disable Debug Data

It’s easy! Simply add:

1
2
3
    myApp.config(['$compileProvider', function ($compileProvider) {
        $compileProvider.debugInfoEnabled(false);
    }]);

If you wish to later debug your application you can type the following command in your browsers console:

1
    angular.reloadWithDebugInfo();

You can visit Angular’s page on Running in Production to learn more.

In The End

Angular adds the ng-scope class directive to an element every time the compiler creates a new scope.

This means that Angular must stop and execute that directives logic when it comes across it. This process slows down your applications run time.

Removing these can give your app quite the speed boost! To remove simple use the following code.

1
2
3
    myApp.config(['$compileProvider', function ($compileProvider) {
        $compileProvider.debugInfoEnabled(false);
    }]);

 

Pro Tip: Setting Headers for All HTTP Request in Angular App

Let’s say, for example, you want to add an Authorization header to all requests you send from your Angular application. Well Angular makes it easy, simply use the following code:

1
    $httpProvider.defaults.headers.common.Authorization = "MY_AUTH_TOKEN";

The above example would set the Authorization header for ALL requests. To learn more about what you can do with $httpProvider click here

Leave a Reply

Your email address will not be published. Required fields are marked *