WebDev – Pretty AngularJS directives


Terrible terrible.

The first thing I thought when I saw AngularJS directives was “holy HOLY!”, then I promptly screamed in agony. Nothing too dramatic, you know.

So directives are like WebComponents. I get that. They are damn useful. I get that. They are even friggin’ composable. I get that mucho bueno senorita Angularita. What I don’t get, though, is the terrible readability of this mess.

The Necronomicon

You might need a R’lyehian to English dictionary.

I can’t help but see how useful and unfriendly this is. This is practically shouting “Beginners! Flee now, or face several hours of therapy where you’ll revisit all your inadequacies!“. Seriously, just look at this.

[snippet id=”114″ title=”AngularJS – Hells Directives” height=”0″ line_numbers=”true”]

This is straight from the AngularJS Developer’s Guide. It is kinda… repulsive. Some people like it like that, however I believe that these people might not be working in teams. When you’re starting out with directives, like the first five times, you need to not feel like you can’t understand the mess of indents and squeezed anonymous functions. I remember freaking out the first few times.

This is not over though, there is something we can do, and no, it does not imply fleeing, therapy sessions, or asking an Old One to translate anything.

[snippet id=”116″ title=”AngularJS – Readable Directives” height=”0″ line_numbers=”true”]

This is the same code, but prettified! Yes, my little lambs of the web, I used the power of COMMENTS*! And the power of moving stuff around too, that’s pretty useful too.

Did I win your heart? Do you now believe in peace of mind, and in the power of understanding cryptic stuff? If this wasn’t enough to win you, here’s a Cthulhu themed directive template for all your future uses:

[snippet id=”122″ title=”AngularJS – Directive Template” height=”0″ line_numbers=”true”]

Use it wisely, and don’t wake the Old Ones…

*Don’t forget to add your own comments below! You can also subscribe to never miss any other post!

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