AngularJS Directives That Override Standard HTML Tags
Directives are the heart and soul of AngularJS. They are incredibly powerful. AngularJS sets out to extend the grammar of the browser to supply semantics that facilitate the creation of web applications, going beyond the standard hyper-linked web page. The primary weapon to accomplish this is the directive.
Creating your own directives is an awesome way to create composed, reusable
behaviors in your applications. This article isn’t about making your own
directives, instead I wanted to take a closer look at the internal directives of
AngularJS. Specifically, we will be looking at how and why AngularJS extends the
functionality of native HTML tags like
<a> to make the magic
A is for Anchor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
htmlAnchorDirective has a simple job. It is there to prevent navigation and page reloading. Typically this is in conjunction with
ng-click, which is used to actually capture the click and navigate the user within the application. Every
<a> in your application is effectively extended by AngularJS. The functionality is primarily the
event.preventDefault() that is applied if the anchor tag doesn’t have an
One thing to note, and this is typical throughout the AngularJS internals, is that this directive requires special attention for IE 7. When I’m digging around in the internals, I’m always appreciative of this effort made by the AngularJS contributors. These aren’t fun problems to solve, and it is nice that somebody has made the effort to solve them for us :>
Digging into <form>
<form> to provide some important functionality. The core of this extension of
<form> is to prevent any page refresh that would occur with an unmodified
<form> tag. Lets have a look:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
The above function is a factory that creates a form directive. The directive itself does several things. Aside from some memory management it also serves to prevent the default behavior of the form action. Typically with an AngularJS application, you will want to capture the user’s input it a form, and feed that data into a controller to send it to the server. This is different from the standard
ngSubmit directive placed as an attribute on the
<form> tag will execute an expression when your designated submit input is clicked.
If you’re paying close attention, you’ll notice that the form directive above has a
FormController assigned to it. The
FormController is the brains of all the forms within an AngularJS application, and every
<form> gets one. The
FormController tracks all of the controls within a form and manages the validity of the form.
The Input Directive
1 2 3 4 5 6 7 8 9 10 11 12
Wow! It’s so simple ;)
It is. This is because the actual
<input> tag is only the entry point. The real work is done based on the type of input that is being used. AngularJS is looking for the following input types:
With the URL, email, and number types, AngularJS provides some basic validation:
1 2 3
Here’s the code for the URL type:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Simple stuff. It is using the REGEX above and setting the validity on the
FormController, which you can then use to display feedback to the user. Email and number validation works in a similar fashion.
With text-type inputs AnglularJS also provides data-binding via
ngModel, which is an extremely convenient solution to capturing user input and displaying it in the form. We should look at
ngModel a bit closer in a future post.
Just the beginning.
It wasn’t immediately obvious to me when I started using AngularJS that the framework was overriding these default HTML tags to add the secret sauce on top. Once the realization dawned on me, it opened my eyes to the power and potential that directives hold. You aren’t restricted to the extensions that AngularJS provides with these built-in directives. You can further extend the capabilities of HTML by creating your own directives that override and extend the native HTML elements.
Digging into the guts of the AngularJS source code is a great way to learn the hows and whys of the framework, and can reveal techniques that can be applied to your own applications. The AngularJS source is well documented, cleanly written, and well tested. If you’re working with AngularJS, I highly recommend diving into these internals and discovering this for yourself. It won’t be time wasted.
You might also enjoy: Lessons Learned: A Year with a Large AngularJS Project
or maybe: Learn AngularJS this Weekend