What is Directives

Directives are one of the most important components of AngularJS.They help us to extend basics HTML element and create reusable and testable code.

Directives are special attributes starting with ng- prefix. Following are the most common directives:

1) ng-app directive

This directive starts an AngularJS Application.

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

2) ng-init directive

The ng-init directive initializes an AngularJS Application data. It is used to assign values to the variables.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
...
</div>

ng-model directive

The ng-model directive defines the model/variable to be used in AngularJS Application. In the following example, we define a model named name.

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

Enter your Name:


</div>

ng-repeat directive

The ng-repeat directive repeats HTML elements for each item in a collection.

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

List of Countries with locale:

  1. {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

</div>

<html >
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h2>Sample Application</h2>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{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>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>