Understanding the Directives – Part 5

by Santhakumar Munuswamy

  Posted on  31 December 2015

  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

  • Element directives
  • Attribute directives
  • CSS Class directives
  • Comment directives  

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

  • ng-App
  • 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

  • ng-bind
  • ng-model
  • ng-init
  • ng-src
  • 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

<Any   
ng-bind=”expression”>  
</Any>  

How to use ng-bind for the CSS Class  

<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  

<Any    
ng-init=”expression”>   
</Any>

How to use ng-init for the CSS Class  

<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 

  • ng-change
  • ng-checked
  • ng-click
  • ng-href
  • 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>


Steps 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

 


About the Author
Santhakumar Munuswamy is a seasoned Solution Architect and Most Valuable Professional in Cloud /AI solutions. He has been experienced around 14 years in Solution designing, Software Product Development, Technical Documentation, Project Management for Web and Cloud Applications. He has experience in the IT industry across different domains (Automotive, Telecommunications, Healthcare, Logistics & Warehouse Automation, etc.) with roles in Technical Architect, Genesys Consultant, Technical Lead, Team Lead, and Developer. He has experienced in mentorship and coaching high potential developers.

Follow Me: Facebook, Twitter, Google Plus, LinkedIn
blog comments powered by Disqus


Month List

Community Badges