AngularJS Directives

AngularJS facilitates you to extend HTML with new attributes. These attributes are called directives.

There is a set of built-in directive in AngularJS which offers functionality to your applications. You can also define your own directives.

Directives are special attributes starting with ng- prefix. Following are the most common directives:

• ng-app: This directive starts an AngularJS Application.
• ng-init: This directive initializes application data.
• ng-model: This directive defines the model that is variable to be used in AngularJS.
• ng-repeat: This directive repeats html elements for each item in a collection.

ng-app directive

ng-app directive defines the root element. It starts an AngularJS Application and automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application.

See this example:

In following example, we've defined a default AngularJS application using ng-app attribute of a div element.

ng-init directive

ng-init directive initializes an AngularJS Application data. It defines the initial values for an AngularJS application.

In following example, we'll initialize an array of countries. We're using JSON syntax to define array of countries.

ng-model directive:

ng-model directive defines the model/variable to be used in AngularJS Application.

In following example, we've defined a model named "name".

ng-repeat directive

ng-repeat directive repeats html elements for each item in a collection. In following example, we've iterated over array of countries.

AngularJS directives Example

Let's take an example to use all the above discussed directives: