The use of Directives in Angularjs greatly expands the working capacity of HTML. You can use many directives in AngularJs. You can use them in your project according to your need. Friends, if you want, you can also make your own Directive according to your need.
Directives are a new attribute in AngularJS that are used to extend HTML. Angularjs has a set of built-in instructions that provide the functionality of your applications. Apart from this, it also lets you define your own instructions.
AngularJS is an attractive frame for web developers, it is actually a completely different way of building applications.
ng-app Directive
It starts an AngularJS application by defining the Directive Root Element and it automatically starts or bootstrap AngularJS applications when the web page which contains the applications is loaded. Apart from this, various AngularJS modules can also be loaded using this instruction.
<div ng-app="" ng-init="firstName='Jyoti'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }} </p>
</div>
ng-init Directive
These instructions are very important at the start of AngularJS Applications Data. It is used to assign the values of different variables to be used.
<div ng-app = "" ng-init = "countries = [{locale:'en-IN',name:'India'},
{locale:'en-PAK',name:'Pakistan'}, {locale:'en-AF',name:'Afghanistan'}]">
...
</div>
ng-model Directive
It connects the values of AngularJS Application Data to HTML Input Controls.
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>
ng-repeat Directive
ng-repeat Repeats HTML elements for each item in a Directive Collection.
<div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
For Example
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directives Example</title>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries =
[{locale:'en-IN',name:'India'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
</body>
</html>
Sample Application
Enter your Name:
Hello !
List of Countries with locale:
- {{ ‘Country: ‘ + country.name + ‘, Locale: ‘ + country.locale }}