Post
Ask Question

Directives In AngularJS

This article explains understand the Directives with a sample application and its usage of Directives discussion to here. In my previous article, we saw understanding the controller with an sample application. Here are the series of article written on AngularJS,

What is Directives?

Directives is a main feature in AngularJs. It can be used in element name, attributes, comment and as well as css class. We can able to used in built-in directives and can able to create an own directives like custom directives.

Directive Type

We can able to implement the following types of directives in AngularJs 

  1. Element directives
  2. Attribute directives
  3. CSS Class directives
  4. Comment directives

Angular provide a couple of in-build directives on application stand point in the following

  1. ng-app
  2. ng-Controller

ng-App Directive

ng-apps directive is associated in the root element of the application. It is basically placed near the root element on the page like body or html tag.

ng-Controller Directive

ng-controller directive is associated a controller class to the view

Angular is provide a few of in-build directives on binding stand point in the following

  1. ng-bind
  2. ng-model
  3. ng-init
  4. ng-src
  5. ng-style

ng-bind Directive


ng-bind attribute enable to replace the text value for the particular element with value and update the value in when the value has been changed.

How to use ng-bind for the attribute

  1. <Any   
  2. ng-bind=”expression”>  
  3. </Any>  

How to use ng-bind for the CSS Class

  1. <Any class=”ng-bind: expression;”>  </Any>  

ng-init Directive


ng-init directive enable to evaluate an expression in the current scope

How to use ng-init for the attribute

  1. <Any   
  2.   
  3. ng-init=”expression”>  
  4.   
  5. </Any>  

How to use ng-init for the CSS Class

  1. <Any class=”ng-init: expression;”>  </Any>  

ng-model Directive

ng-model directive is bind an input fields to a property on the scope of the current controller

Angular is provide a few of in-build directives on operation stand point in the following
  1. ng-change
  2. ng-checked
  3. ng-click
  4. ng-href
  5. ng-selected 

Step 1:

Open Visual Studio 2015 and go to file menu and point the new and then click new project. New ASP.NET project window will open, you can select a ASP.NET Web Application and Type Project Name AngularJsDirectivesDemo, Choose the project location path and then click OK button.

New ASP.NET project window will open, you can select a Empty Template with No Authentication and then click OK button.

Go to Solution Explorer and right click the project name and then click Manage NuGet Packages.

 

NuGet Package Manager window will open and you can type AngularJS and browse. Also selectAngularJS.Core and click Install button.

 

Preview window will open and you can see the AngularJS version installing details and click OK button. After it is successfully installed in AngularJS, you can see the following,

 
 
You can see AngularJsControllerDemo project structure as in the following screenshot.
 
 

Add SimpleDirectives.html

Go to Solution Explorer and right click the project name and point Add then click the HTML Page. You can type the item name SimpleDirectives.html and click OK button

Step 2: SimpleDirectives.html code here, ng-model, ng-bind and ng-init

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title> San2debug.net | AngularJs Controller Application Demo </title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.     <h2>AngularJs Directive Application Demo</h2>    
  10.     <div ng-app="">  
  11.         First Name: <input type="text" ng-model="firstName" /><br /><br />  
  12.         Last Name:  <input type="text" ng-model="lastName" /><br /><br />  
  13.         <hr />          
  14.         Welcome {{firstName}} {{lastName}}  
  15.     </div>  
  16. </body>  
  17. </html>  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title> San2debug.net | AngularJs Controller Application Demo </title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.     <h2>AngularJs Directive "ng-init" Application Demo</h2>  
  10.     <div ng-app="" ng-init="firstName='Vishanth'">  
  11.         First Name: <input type="text" ng-model="firstName" /><br /><br />  
  12.         Last Name:  <input type="text" ng-model="lastName" /><br /><br />  
  13.         <hr />  
  14.         Welcome <span ng-bind="firstName" ></span> {{lastName}} </div>  
  15. </body>  
  16. </html>  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title> San2debug.net | AngularJs Student Mark Sheet Demo </title>  
  5.     <meta charset="utf-8" />  
  6.     <script src="Scripts/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.     <center>  
  10.         <h2>Student Mark Sheet</h2>  
  11.         <table ng-app="" width="500px" cellpadding="3" cellspacing="6" border="1">  
  12.             <tr>  
  13.                 <td>Tamil:</td><td> <input type="number" ng-model="tamil" /><br /></td>  
  14.             </tr>  
  15.             <tr>  
  16.                 <td>English:</td>  
  17.                 <td> <input type="number" ng-model="english" /><br /></td>  
  18.             </tr>  
  19.             <tr>  
  20.                 <td>Maths: </td>  
  21.                 <td><input type="number" ng-model="maths" /><br /></td>  
  22.             </tr>  
  23.             <tr>  
  24.                 <td>Science: </td>  
  25.                 <td><input type="number" ng-model="science" /><br /></td>  
  26.             </tr>  
  27.             <tr>  
  28.                 <td>Social Science</td>  
  29.                 <td> <input type="number" ng-model="socialscience" /><br /></td>  
  30.             </tr>  
  31.             <tr>  
  32.                 <td><strong>Total Marks</strong></td>  
  33.                 <td> {{tamil + english + maths + science + socialscience }}</td>  
  34.             </tr>  
  35.               
  36.         </table>  
  37.     </center>  
  38. </body>  
  39. </html>  

Step 3: AngularJS Controller Application demo output as in the following screenshot,

 
 
 

Conclusion


This article helps you to understand the Directives with a sample application using Visual Studio 2015. Thank you for reading my articles. Kindly share your comments or suggestion.
 


Similar Articles