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:
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
Learn more about making your own directives in our blog on Custom Directives of Angular.