AngularJS Directives (ng-app, ng-init, ng-model, ng-repeat) with Example

Here we will learn what are the directives in angularjs, how to use directives in angularjs, different types of directives in angularjs with example.

AngularJS Directives

AngularJs directives are an extension over the HTML elements and that allow you to extend the HTML elements behavior by adding special attribute prefix ng-.

 

AngularJS is having set of built in directives which allows us to implement required functionality by using html elements in application.

AngularJS Built in Directives

Following are the few built in directives available in angularjs.

 

DirectiveDescription
ng-app This directive is used to define starting of an application.
ng-init This directive is used to initialize a values to variables used in application.
ng-model This directive is used to bind the values of input controls to application data.
ng-repeat This directive is used to loop through the elements in collection it will act like for loop.

AngularJS ng-app Directive

In angularjs, ng-app directive is used to define starting of application and it will act as root element for application. The ng-app in angularjs will identify which part of HTML contains angularJs app. We will use ng-app in angularjs like as shown following

 

<div ng-app="">

---your code---

</div>

AngularJS ng-init Directive

By using ng-init directive in angularjs, we can assign values to the variables during an application initialization. Declaration of ng-init in angularjs like as shown following

 

<div ng-app="" ng-init="val1=hi">

---your code---

</div>

AngularJS ng-model Directive

The ng-model directive in angularjs is used to get value of input controls like textbox, label, etc and use that value in angular application wherever we required. Generally we will use ng-model directive in angularjs like as shown following

 

<div ng-app="">

<input type="text" id="txtname" ng-model="name" />

<p>Your Username: {{name}}</p>

</div>

AngularJS ng-repeat Directive

The ng-repeat directive in angularjs is used to loop through items in collection element and it will act as for loop. We can use ng-repeat directive in angularjs application like as shown following

 

<div ng-app="" ng-init="employees=['Suresh','Rohini','Saineshwar']">

<ul>

<li ng-repeat="name in employees">

{{ name }}

</li>

</ul>

</div>

We will see all these angularjs directives with simple example.

AngularJS Directives Example

Following is the example of using directives in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Directives Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body ng-app="">

<div>

<input type="text" id="txtname" ng-model="name" />

<p>Your Nmae: {{name}}</p>

</div>

 

<div ng-init="employees=['Suresh','Rohini','Saineshwar']">

<p>Employee Details:</p>

<ul>

<li ng-repeat="name in employees">

{{ name }}

</li>

</ul>

</div>

</body>

</html>

Now run application and check output that would be like as shown below.

Output of AngularJS Directives Example

Following is the result of using directives in angularjs applications.

 

Angularjs Directives Example Output or Result