AngularJS Directives

AngularJS Directives

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

Directives are special attributes starting with ng- prefix.

We are going to discuss following directives which are the most common directives –

  • ng-app:- This directive starts an AngularJS application.
  • ng-init:-This directive initialize application data.
  • ng-bind:-This directive binds the value of HTML inputs controls to application data.
  • ng-model:-This directive binds the values of AngularJS application data to HTML input controls(input, selection, text area).
  • ng-repeat:-This directive repeats HTML elements for each item an 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.

Example:

ngpp

The ng-app directive also tells AngularJS that the <body>  is the owner of the AngularJS application.

ng-init directive

ng-init directive initializes an AngularJS application data. It is used to put values to the variables to be used in the application.

In the following example. we will initialize the variable

nginit

ng-bind directive

ng-bind directive bind the application data to HTML view. The ng-bind directive bind AngularJS data to HTML the same way as AngularJS expression.

ngbind

Output:

 ngbindoutput

ng-model directive:

This directive binds the values of AngularJS application data to HTML input controls. In following example, we’ve defined a model named “name” and access that variable using ng-bind directive.

 ngmodel

Output:

 

 

ng-repeat directive:

ng-repeat directive repeats HTML elements for each item in a collection

ngrepeatprogram

Output:

ngrepeat

We have so many other built in directives that we will discuss later.

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s