Learn How to Determine the Number of Bindings in Your Angular App

Introduction

Angular can start to crawl if you have too many bindings. But Angular does not provide a simple way to see how many bindings your app is using. The code below provides a simple method for getting the number of bindings used in your app.

Angular Uses Bindings...

Anyone using Angular should already know that.

Depending on the size of your app, you might have many bindings. You may even have too many bindings. The magic number I keep reading about is around 2000 bindings for a given app. Anything above that tends to slow down processing of the app.

How Many Bindings You Are Using?

The simplest and least accurate method would be to count the number of bindings you see in your template and multiply it by the number of repeated objects you have on the page. Doing this, you are likely to get a number that is a huge underestimation.

Instead, you can take the code below and paste it into the console of your preferred web browser. But you must have Underscore.js or Lo-Dash loaded.

function getScopeList(rs) {
    var scopeList = [];
    function traverseScope(s) {
        scopeList.push(s);
        if (s.$$nextSibling) {
            traverseScope(s.$$nextSibling);
        }
        if (s.$$childHead) {
            traverseScope(s.$$childHead);
        }
    }
    traverseScope(rs);
    return scopeList;
}

scopes = getScopeList(angular.element(document.querySelectorAll("[ng-app]")).scope());
total = _.uniq(_.flatten(scopes.map(function(s) { return s.$$watchers; }))).length;

This will give you the total number of scopes for ONE ng-app. For many Angular web applications, that is all you will have, one ng-app.

I Have Bootstrapped More Than One ng-app...

Some pages have more than one ng-app. While I don't recommend this, it, sometimes, needs to happen. If this is your case, then you will want to paste the code below into the browser console:

function getScopeList(rs) {
  var scopeList = [];

  function traverseScope(s) {
    scopeList.push(s);
    if (s.$$nextSibling) {
      traverseScope(s.$$nextSibling);
    }
    if (s.$$childHead) {
      traverseScope(s.$$childHead);
    }
  }

  traverseScope(rs);
  return scopeList;
}

total = 0;
apps = angular.element(document.querySelectorAll("[ng-app]"));
[].forEach.call(apps, function(app,i) {

  ngapp = angular.element(app);
  slist = getScopeList(ngapp.scope());
  wl = slist.map(function(s) {return s.$$watchers;});
  c = _.uniq(_.flatten(wl)).length;
  appName = ngapp.attr("ng-app") || ngapp.attr("data-ng-app") || i;
  console.log("App %s: %d - Scopes: %O", appName, c, slist);
  total += c;
});
total

This will output a separate value for each ng-app that you have running and then the total for all ng-apps. The output also displays the name of the app by reading the attribute ng-app from the DOM element that defined it. And the last element displayed is the array of scopes that are part of that app.

The second set of code works for both single ng-apps or multiple ng-apps.

That's It!

Now you can see how many bindings and scopes each of your ng-apps have.