Chapter 5
Directives
Most JavaScript frameworks have a “special something” that sets them apart. That special something in the case of
AngularJS is undoubtedly directives. The idea that we can use a declarative approach that lets us augment HTML with
new capabilities has great appeal. I suspect this has very much to do with clean looks and intuitive syntax, but it might
be because it is a fun and enjoyable way to approach client-side web development.
In this chapter, I will recap some of the things we have already been using, by looking at the built-in directives.
You will also have a first look at creating custom directives.
Directives, in Angular JS, are essentially JavaScript functions that are invoked when the Document Object Model
(DOM) is compiled by the Angular JS framework. I will touch on what is meant by the DOM being “compiled” when
we take a peek behind the scenes later in the chapter, but for now, it is enough to know that directives are “attached”
to their corresponding DOM elements when the document is loaded.
■ Tip Don’t let the word compiler scare you off! It is simply AngularJS terminology for the internal mechanism that is
used to associate directives with HTML elements.
Due to this this powerful concept, Angular JS lets you create totally new directives that we can use to encapsulate
logic and simplify DOM manipulation—directives that can modify or even create totally new behavior in HTML.
What can we use directives for? As directives can modify or even create totally new behavior, we can use
directives for anything from simple reusable blocks of static content right through to sophisticated client-side user
interfaces with network and database connectivity—and everything else in between. The built-in directives provide
the general level of functionality that you would expect to find—the bread-and-butter directives, so to speak—though
custom directives let you push things much further. The only limit is your imagination. (Well, maybe your JavaScript
skills have some impact on this too!)
Of course, Angular JS is much more than directives; however, they do seem to be the main attraction. I hope, by
the end of this chapter, you will have gained an appreciation of why this is so.