Tutorial: A Neat Hack to Show Controllers on Your Angular Apps in a Clearer Way

Maciej Jankowski developed his first ecommerce solution back in 2000, and he has been coding with Javascript for fifteen years to develop web scrapers, browser extensions, web apps, back end, etc. He is a consultant with over 6 years of experience and specializes in implementing business solutions.

This article was originally posted at B-Good.

After some time spent with AngularJS and structuring my application I found it useful to see what controllers and what partials are being used in any application view that I’m working with – and batarang, while a nice tool is not really helping that much – with those red cluttered outlines – it does not show what is where.

So I came up with this little piece of code which you can easily discard when you move to production.

The result

Before:

After:

Click here for the demo

CSS content to the rescue

The idea behind it is really simple – it’s based upon CSS content property which renders controller name right where the the controller-bound tag starts.

.dbg-ctrl:before
{
content: attr(ng-controller) attr(data-ng-controller);
position:relative;
line-height: 16px;
font-size: 16px;
background-color: greenyellow;
padding:2px 6px;
}

I also added a translucent background for easily identifying controllers nesting.

.dbg-ctrl
{
border: 1px dotted crimson;
background-color: rgba(173,255,47,0.09);
padding:5px;
}

Then I’m using jQuery to dynamically add the class:

$('[ng-controller]').addClass('dbg-ctrl');

While adding classes with jQuery is definitely not recommended* in your production app, here I chose it deliberately because I didn’t want to pollute my production code and I wanted to make it easy to unplug this “feature” from my application.

Sample code can be found here. If there is anyone who can help in making this into Angular Batarang I’d be happy to contribute.

*For dynamically adding classes the angular way, you should be using ng-class statement. 

Need Maciej’s help? Book a 1-on-1 session!

View Maciej’s Profile

or join us as an expert mentor!