I know, I know, there are hundreds of solid blog articles that anyone can search about Angular directives. So how is this article different? Well, I don’t think much. But I do want to share my experience with Angular directives and how they finally “clicked” for me as a web app developer.
In my last project, I ended migrated much of our stand alone Angular controllers as directives. I don’t know why it took me so long to realize that ng-controller is just a directive that loads a controller (duh, even the official documentation says so). There were a few times where I found myself registering a normal controller, but it was when I intended the controller would be reused in multiple ng-controller directives or in any other custom directives (basically sharing the controller across different views). Besides that, I found it much simpler to couple the controller with the view. Wait, what? Yeah, in the last two years developing with Angular, I discovered my controllers were always tied to a single view (or template). Bear in mind this does not mean business logic also went into the controller. No, those were put into services (or “model”) where they belong. Instead the controller handled the interaction between the view and model (as it rightly should).
The other beautiful thing about directives was the idea of “extending HTML” or giving HTML new tricks. At first, I found it super strange to have non-HTML valid elements in my code. I wrote my directives primarily as attributes. When I migrated to create directives instead of controller, it made way more sense that I would exclusively use directives as elements. In a nutshell, many of the directives I wrote extended HTML by giving a new element to represent its extension. It not only represented what I wanted to display, but it also gave it new behavior.
Directives can also modify behavior of existing elements. That idea clicked for me while creating attribute only directives that basically gave new life to existing HTML elements or even modifying the behavior of my own directive elements.
With that said, I created a simple Angular directive as an element that represents a business card.
<div> <tw-business-card></tw-business-card> </div>
Would render
I added extra behavior to the element that when the user hovers over it it will flip to the back
Just like many other elements, we can configure it through an attribute. Because this is actually an Angular directive, we can pass in a string that resembles a Javascript object to be parsed
<div>
<tw-business-card data-contact="{name: 'Jane Deaux',
title: 'Officer Manager',
email: 'jane.deaux@twinwork.net',
phone: '+1 (323) 555-4321'}">
</tw-business-card>
</div>
Renders
If you see Angular directives teaching HTML new tricks, a whole new world opens up in web app development.
See the tw-business-card directive demo. View the source on Github