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!