AngularJS Directives

Updated on September 20, 2015 Kisan Patel

A directive is really a new way to attaches special behavior to a DOM element. By default, a framework brings with it a basic set of directives such as iterate over an array, execute a custom behavior when an element is clicked, or even show a given element based on a conditional expression, and many others.

For example, ng-repeat, ng-show, ng-model, etc.

The ng-app directive is the first directive we need to understand because it defines the root of an AngularJS application. Applied to one of the elements, in general HTML or body, this directive is used to bootstrap the framework.

Here, we have the ng-repeat, the ng-init: these are two directives. The ng-init directive initialize application data. Then the third is ng-repeat which will simply loop through all the names. Here, we have five names and so we would get five <li> with the name written out automatically.