What are Angular Directives?

Directives are used to extend HTML. It is a started with ng-prefix. AngularJS contains following directives:
1.  ng-app Directive – It is used to initialize an AngularJS application.
e.g.

<div ng-app = "">
...
</div>

2. ng-init Directive – It is used to initialize application data.
e.g.

<div ng-app="" ng-init="name=['abc','xyz']">
//code
</div>

3. ng-model directive – It associates the value of HTML controls with the application data.
e.g.

<div ng-app = "">
//code
<p>Enter Text:<input type = "text" ng-model = "name"></p>
</div>

Check out our Angular tutorial and get started with Angular today!

4. ng-repeat directive – It is used  to repeat HTML elements for every item in a collection.
e.g.

<div ng-app="" ng-init="names=['abc','xyz']">
<ul>
<li ng-repeat="n in names">
{{ n }}
</li>
</ul>
</div>

Example

<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>Directive Example</title>
</head>
<body>
<h1> Example of Directive</h1>
<div ng-app="" ng-init="names=['abc','xyz']">
<p>Enter Text:<input type = "text" ng-model = "name"></p>
<ul>
<li ng-repeat="n in names">
{{ n }}
</li>
</ul>
</div>
</body>
</html>

 Output
output3

Learn more about making your own directives in our blog on Custom Directives of Angular.

Course Schedule

Name Date Details
Web Development Courses 23 Mar 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 30 Mar 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 06 Apr 2024(Sat-Sun) Weekend Batch
View Details

Find Best AngularJS Training in Other Regions

Bangalore Hyderabad Chennai Mumbai