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.
Chandradev's Blog 