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

  Total Views : 1261
  Comments : 0
 
  Keywords : What are the directives in angularjs, How to use directives in angularjs, Different types of directives in angularjs, Angularjs ng-app, ng-init, ng-model, ng-repeat directives 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.

Built in Directives in AngularJS

Following are the few built in directives available in angularjs

 

ng-app – This directive is used to define starting of application

 

ng-init – This directive is used to initialize values to variables used in application

 

ng-model – This directive is used to bind 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

ng-app Directive in AngularJS

Generally ng-app directive in angularjs 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>

ng-init Directive in AngularJS

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

 

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

---your code---

</div>

ng-model directive in AngularJS

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>

ng-repeat Directive in AngularJS

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.

Example of AngularJS Directives

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

Following is the result of using directives in angularjs applications

 

Angularjs Directives Example Output or Result

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User