At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.
Normalized form of Angular Directives
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
</head>
<body>
<div ng-app> Hello <input ng-model=’name’>
<hr /> <span ng-bind=”name”></span> <br />
<span ng:bind=”name”></span> <br />
<span ng_bind=”name”></span> <br />
<span data-ng-bind=”name”></span> <br />
<span x-ng-bind=”name”></span> <br />
</div>
</body>
</html>
ng-app and ng-Init directive
DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
</head>
<body>
<div ng-app ng-init=”qty=1;cost=2″>
<div>
<b>Total :</b>{{qty*cost | currency}}
</div>
</div>
</body>
</html>
ng-bind directives
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
</head>
<body>
<div ng-app=””>
<p> First Name: <input type=”text” ng-model=”fname”>
Last Name: <input type=”text” ng-model=”lname”>
</p> Hello {{fname + ” ” + lname}} <br />
<span ng-bind-template=”{{fname}}{{lname}}”></span>
</div>
</body>
</html>
Conditional Directives
ng-show and ng-hide directives
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
</head>
<body>
<div ng-app>
<input type=”checkbox” name=”chkShow” value=”” ng-model=”blnShow” /> Show Block
<div ng-show=”blnShow”>This is a block</div>
</div>
</body>
</html>
ng-if directives
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
</head>
<body>
<div ng-app>
<input type=”checkbox” name=”chkShow” value=”” ng-model=”blnShow” /> Show Block
<div ng-show=”blnShow”>This is a block</div>
</div>
</body>
</html>
The ng-switch, ng-switch-when, ng-switch-default Directives:
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
</head>
<body>
<div ng-app>
<input type=”checkbox” name=”chkShow” value=”” ng-model=”blnShow” /> Show Block
<div id=”div1″ ng-show=”blnShow”>This is a block</div>
<div id=”div2″ ng-if=”blnShow”> This is If block</div>
<input type=”button” value=”Div1 in DOM Tree” onclick=”alert(document.getElementById(‘div1’)!=null);”>
<input type=”button” value=”Div2 in DOM Tree” onclick=”alert(document.getElementById(‘div2’)!=null);”>
</div>
</body>
</html>
The ng-repeat Directive:
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
</head>
<body>
<div ng-app=”” ng-init=”names=[{FirstName:’Shahrukh’,LastName:’Kahn’},{FirstName:’Virat’,LastName:’Kohli’},{FirstName:’Bruce’,LastName:’Lee’}]”>
<table> <tr ng-repeat=”name in names”>
<td>{{name.FirstName}}</td>
<td>{{name.LastName}}</td>
</tr> </table> </div>
</body>
</html>
Styles Directives
The ng-class Directives
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
<style> .strike {
text-decoration: line-through; }
.bold { font-weight: bold; } .red { color: red; } </style> </head> <body> <div ng-app> <p ng-class=”{strike: deleted, bold: important, red: error}”>Map Syntax Example</p> <input type=”checkbox” ng-model=”deleted”> deleted (apply “strike” class)<br> <input type=”checkbox” ng-model=”important”> important (apply “bold” class)<br> <input type=”checkbox” ng-model=”error”> error (apply “red” class) <hr> <p ng-class=”style”>Using String Syntax</p> <input type=”text” ng-model=”style” placeholder=”Type: bold strike red”> <hr> <p ng-class=”[style1, style2, style3]”>Using Array Syntax</p> <input ng-model=”style1″ placeholder=”Type: bold, strike or red”><br> <input ng-model=”style2″ placeholder=”Type: bold, strike or red”><br> <input ng-model=”style3″ placeholder=”Type: bold, strike or red”><br> </div> </body> <
The ng-class-even & ng-class-odd Directives
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”angular.js”></script>
<style>
.even
{
background-color:red;
}
.odd
{
background-color:yellow;
}
</style>
</head>
<body>
<div ng-app>
<ol ng-init=”names=[‘John’, ‘Mary’, ‘Cate’, ‘Suz’]”>
<li ng-repeat=”name in names”>
<span ng-class-odd=”‘odd'” ng-class-even=”‘even'” ng-bind=”name”></span>
</li>
</ol>
</div>
</body>
</html>