Post
Ask Question

Most Important Directives In AngularJS

Introduction

 
In this blog, we will learn about some of the most important in-built directives in AngularJS and see some examples on each directive. Let's start!
 

Directive in Angular

 
Directives are used to extend the HTML and most of the in-built directives in AngularJS start with the ng- prefix. AngularJS allows us to create our own elements as well! This makes directives the most powerful and the most celebrated feature of the framework.
 
Some of the most important in-built directives are listed below.
  • ng-app
  • ng-model
  • ng-bind
  • ng-init
  • ng-repeat

ng-app

 
This directive is used to start an AngularJS application and it is used to load various modules in the Angular application. Normally, only one ng-app directive can be used in your HTML document.
 
Example
 
In this example, the ng-app directive is in the <div> tag and it is calculating the sum of two numbers using {{}} interpolation symbol.
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <script src="angular.min.js"></script>  
  5. </head>  
  6. <body>  
  7.     <div ng-app=""><!-- Starting the angularjs application -->  
  8.         <p>Sum = {{10+10}}</p>  
  9.     </div>  
  10. </body>  
  11. </html>  

ng-model

 
The ng-model directive is used to bind the value of HTML control into application data.
 
Example
 
In this example, the ng-model directive creates a model variable "name" and shows "name" variable using interpolation symbol {{name}}.
  1. <html>   
  2. <head>  
  3. <title>ng-model</title>  
  4. <script src="angular.min.js"></script>   
  5. </head>   
  6. <body>   
  7. <div ng-app="">   
  8.    <p>Enter your Name: <input type="text" ng-model="name"></p>   
  9.    <p>Your Name is {{name}} </p>  
  10. </div>   
  11. </body>   
  12. </html>  

ng-bind

 
This directive is used to bind the HTML tags into application data.
 
Example
 
In this example, the ng-model directive creates a model variable "name" and the ng-bind use the "name" model to be displayed in the HTML <span> tag whenever the user enters input in the text box.
  1. <html>   
  2. <head>  
  3. <title>AngularJS</title>   
  4. <script src="angular.min.js"></script>   
  5. </head>  
  6. <body>   
  7. <div ng-app="">  
  8.    <p>Enter your Name: <input type="text" ng-model="name"></p>      
  9.    <p>Hello <span ng-bind="name"></span>!</p>   
  10. </div>   
  11. </body>   
  12. </html>  

ng-init

 
This directive is used for initializing an AngularJS Application data and it is also used to assign values to the variables.
 
Example
 
In this example, the ng-init initialize a variable "radius" and that value is 10.
  1. <html>  
  2. <head>  
  3.     <title>Area</title>  
  4.     <script src="angular.min.js"></script>  
  5. </head>  
  6. <body>  
  7.     <h3>Area of Circle</h3>  
  8.     <hr />  
  9.     <div ng-app="" ng-init="radius=10">  
  10.         <p>Enter your radius: <input type="number" ng-model="radius" /> m</p>  
  11.         <p><b>Area of Circle: </b>{{3.14*radius*radius}} m<sup>2</sup></p>  
  12.     </div>  
  13. </body>  
  14. </html>  

ng-repeat

 
This directive is used to repeat an HTML element. It's like a foreach loop in C# language.
 
Example
 
In this example, the ng-init directive initializes an array of names and ng-repeat directive repeats HTML elements for each item in a collection.
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <script src="angular.min.js"></script>  
  5. </head>  
  6. <body>  
  7.     <div ng-app="" ng-init="Names=['Sarfaraj','Zahid','Hasim','Zeba','Kausar','Rizwan']">  
  8.         <ul>  
  9.             <li ng-repeat="name in Names">{{name}}</li>  
  10.         </ul>  
  11.     </div>  
  12. </body>  
  13. </html>  

Summary

 
In this blog, I covered some of the most important in-built directives in AngularJS and we saw examples for each directive. In the next blog, we will learn about Controllers.
 
Thanks for reading!