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.

<html>
<head>
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Sum = {{10+10}}</p>
</div>
</body>
</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}}.

<html>
<head>
<title>ng-model</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Your Name is {{name}} </p>
</div>
</body>
</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.

<html>
<head>
<title>AngularJS</title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
</div>
</body>
</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.

<html>
<head>
<title>Area</title>
<script src="angular.min.js"></script>
</head>
<body>
<h3>Area of Circle</h3>
<hr />
<div ng-app="" ng-init="radius=10">
<p>Enter your radius: <input type="number" ng-model="radius" /> m</p>
<p><b>Area of Circle: </b>{{3.14*radius*radius}} m<sup>2</sup></p>
</div>
</body>
</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.

<html>
<head>
<title></title>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="Names=['Sarfaraj','Zahid','Hasim','Zeba','Kausar','Rizwan']">
<ul>
<li ng-repeat="name in Names">{{name}}</li>
</ul>
</div>
</body>
</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!