Directive in AngularJs (Part3)


Directive

Directives are one of the important parts of AngularJs which is used to extend HTML attributes with prefix ng- keyword.

Some of the examples are

The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="EmpNames=[ {FirstName: 'Ram',LastName :'Prasad'},
              {FirstName: 'Mohan',LastName :'Sharma'},
              {FirstName: 'Ravi',LastName :'Verma'}
         ]" >
       <ul>

           <li ng-repeat="name in EmpNames">
               {{ name.FirstName +', '+ name.LastName }}
           </li>
       </ul>
    </div>
</body>
</html>

Note: in the above example we have created EmpNames array with FirstName and LastName object. We are looping in the EmpNames array using ng-repeat directive.

Point to remember
ng-app Directive:
1. It is root element of angular Js application.
2. It wills auto-bootstrap the application when a web page is loaded.

Ng-init Directive:

1. It defines the initial values for angularJs application.
Ng-model Directive:
1. It is used to bind the value of HTML control (Input, Select, textarea) to application data.
2. It also provides the type validation for application data (number, email, required).
3. It also provides status and warning message of application data.
4. It provides CSS classes for HTML element.
5. It also bind HTML element to HTML Form.

Ng-repeat Directive:

It is used for displaying data in repeated format from collection of data.

Summary:

In this post we learnt the overview of directive in angularJs.

Advertisements

Leave a Reply

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

%d bloggers like this: