Learning AngularJS

Chapter 9. AngularJS Directives

From a user’s perspective, directives are nothing more than custom HTML tags that are added to application templates. Directives can be simple, or they can be very complex. Directives are used by the AngularJS HTML compiler to enhance the functionality of the associated template. Some examples of AngularJS directives are ngModel, ngView, and ngRepeat.

The HTML Compiler

Let’s talk briefly about the AngularJS HTML compiler. The use of the word compiler in relation to AngularJS is often confusing for experienced developers new to the framework. Experienced developers don’t normally associate compilers with HTML. The word compiler, however, takes on a whole new meaning in the context of AngularJS.

Compiling HTML in AngularJS is simply the process of searching through the DOM tree to identify HTML elements associated with directives. The compiler then builds the template and assigns events to the associated elements in the template. This, however, is a greatly simplified description of the AngularJS HTML compiler and the compiler processes. If you would like to know more about the compiler, take a look at the AngularJS website documentation, which covers the HTML compiler in great detail.

What Are Directives?

Directives are very valuable in AngularJS and are what sets AngularJS apart from most JavaScript client-side frameworks. Thanks to directives, we can avoid creating model classes with hundreds of lines of code. Thanks to directives, we have a ...