Directives in AngularJS
In AngularJS, we can extend HTML in a very simple way using attributes which are basically called directives. Today we discuss different types of directives in AngularJS.
There are five different types of directives in AngularJS and those are App Directive, Model Directive, Bind Directive, Init Directive, Repeat Directive, and Valid Directive. Each directive can play separate role in the application.
App Directive:
App directive is used to define the AngularJS area for the application. We can define app directive using ng-app=”” syntax or just mention ng-app inside any html element as below.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body ng-app=""> <input type="text" ng-model="Name" placeholder="Enter your name" /> <h1> Hi <span ng-bind="Name"></span></h1> </body> </html>
Here we define the AngularJS area for whole body element. We can define ng-app directive for simple html elements also like <div ng-app=””> </div> or <div ng-app></div>. We can apply AngularJS only within the element for which ng-app directive defined.
Model Directive:
Model directive is used to bind the inputted value from html control (like textbox, radiobutton,..etc) to application data. We can achieve this by using ng-model=”AppDataName” syntax. Here AppDataName can be any name.
As shown in the above example, we have bind the textbox value to application data with the name as “Name”.
Bind Directive:
Bind directive is used to bind the data from application data variable to html element. The syntax for bind directive is ng-bind=”AppDataName”. As shown in the above example, we have bind the textbox value to Name application data variable by using ng-model=”Name” model directive. And binding Name application data variable data to span html element by using ng-bind=”Name” bind directive.
Init Directive:
Through Init directive, we can initialize any application data variable to a value. The syntax of init directive is ng-init=”default value”.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body> <div ng-app ng-init="Name='Raj'"> <h1> Hi <span ng-bind="Name"></span></h1> </div> </body> </html>
As shown in the above code, we have set the default value as “Raj” for Name application data variable by using ng-init directive. We can bind this Name application variable to any html element like we bind the value to span element. The output displays as shown below.
Repeat Directive:
Repeat directive works like loop. By using Repeat directive, we can bind the values from array element to any html element.
<!DOCTYPE html> <html> <head> <script src="scripts/angular.min.js"> </script> </head> <body> <div ng-app ng-init="Names=['Raj','David','Bob']"> <ol> <li ng-repeat="name in Names"> <p ng-bind="name"></p> </li> </ol> </div> </body> </html>
As shown above, we assign the array of values to Names application data variable. Using ng-repeat="name in Names" directive, we are looping the Names variable values and binding each name to <p> html element. Here name represents single value from Names array variable. The output displays as shown below.
Valid Directive:
Valid directive is used to change the status of specified html element when the input is valid.
<!DOCTYPE html>
<html>
<head>
<script src="scripts/angular.min.js"> </script>
<style>
input.ng-valid
{
background-color:green;
}
</style>
</head>
<body>
<div ng-app>
<input type="text" ng-model="UserName" required placeholder="Enter your name" />
</div>
</body>
</html>
As shown above, input.ng-valid directive changes the input element status when input is valid. And we need mention the required property to element for which we are validation in-addition with ng-model directive. The background of the textbox will get change whenever you enter some data as shown below.
