Mastering Web Application

Building Your Own Directives

What are AngularJS directives?

Directives are, arguably, the most powerful feature of AngularJS. They are the
glue that joins your application logic to the HTML DOM. The following diagram
illustrates how directives fit into the architecture of an AngularJS application:

SCOPES

&

DIGESTS

Business Logic

APPLICATION

LOGIC

SERVICES

CONTROLLERS

User Interface

HTML

MARK-UP

DIRECTIVES

By extending and customizing how the browser behaves with regard to the HTML,
directives let the application developer, or designer, focus their attention on what
the application should do, or look like, in a declarative manner, rather than on
programming low level interactions with the DOM. This makes the development
process faster, more maintainable, and most importantly more fun!

AngularJS directives add new meaning and behavior to mark up in your HTML
application. It is inside the directives, where you can get low level and dirty with
DOM manipulation, usually working with jQuery or AngularJS's jqLite.

If you load jQuery before AngularJS, then AngularJS will use jQuery

for its DOM manipulation. Otherwise AngularJS assumes that you

are not using jQuery and implements its own internal, minimal

version of jQuery, which is often referred to as jqLite.

The job of a directive is to modify the DOM structure and to link the scope to the
DOM. This means manipulating and binding DOM nodes based on data in the scope,
but also binding DOM events to call methods on the scope.

Understanding the built-in directives

AngularJS comes with a number of built-in directives to the framework. There
are the obvious custom HTML elements and attributes, such as ng-include, ng-
controller and ng-click. There are also what appear to be standard HTML
elements, such as script, a, select, and input. All of these directives are provided
by the core AngularJS framework.