AngularJS Directives: Directives help to bring Angular JS applications to life. Directives are used to create original syntax, and each begins with the prefix “ng”-(which stands for Angular). A directive is assigned to give a DOM element a special behavior. For example, “ng-repeat” repeats a specific element and “ng-show” shows an element only under certain conditions.
AngularJS Directives Uses
The idea behind directives is simply that it makes your HTML truly interactive by attaching event listeners (objects that initiate actions in response to other actions) to the elements and taking action on the assigned DOM. AngularJS includes a variety of useful built-in directives, but it is also useful to create custom directives for your individual needs.
You can also create your own directives. The ng-app directive begins an AngularJS application. The ng-init directive starts the application data. The ng-model directive syncs the value of the user input controls to application data. You can create custom directives, however, it is best practice not to use the “ng” prefix, due to possible conflicts.
AngularJS Directives Example
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<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>
AngularJS Directives Example Output
