• Articles
  • Tutorials
  • Interview Questions
Home > Blog > Tutorials > Angular Directives with Example

Angular Directives with Example

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>

Angular JS Expert

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>

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

Course Schedule

Name Date Details
Web Development Courses 14 Dec 2024(Sat-Sun) Weekend Batch View Details
21 Dec 2024(Sat-Sun) Weekend Batch
28 Dec 2024(Sat-Sun) Weekend Batch

About the Author

Kislay
Kislay
Technical Research Analyst - Full Stack Development

Kislay is a Technical Research Analyst and Full Stack Developer with expertise in crafting Mobile applications from inception to deployment. Proficient in Android development, IOS development, HTML, CSS, JavaScript, React, Angular, MySQL, and MongoDB, he’s committed to enhancing user experiences through intuitive websites and advanced mobile applications.