What is AngularJS 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>

Watch this TypeScript vs JavaScript Tutorial Video for Beginners:

AngularJS Directives What is AngularJS 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.


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

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *