AngularJS Directives - What are AngularJS directives
AngularJS directives explained. Learn about built-in directives like ng-model, ng-repeat, ng-if, and create custom directives for dynamic web apps | RRTutors
We can add new characteristics or attribute to the HTML element called Directives using AngularJS. AngularJS application functionality provides by a set of built-in directives in AngularJS. We may create your directives with AngularJS as well. We use Angular Directives to convert an HTML static page into a dynamic page. An AngularJS directive adds a specific behavior using the Document Object Model (DOM).
AngularJS Directive Methods
There are two types of directives used in the AngularJS web application.
-
In-built AngularJS Directive
The AngularJS uses a default directive to create a web application. It is the inbuilt source for developing a single-page MVC application.
-
Custom AngularJS Directive
The AngularJS creates customized directives to create the web application. It creates on its own with the required defined function.
Essential Directives
Special attributes with the "ng-" prefix are called directives. The following are the most typical instructions:
- ng-app directive
- ng-init directive
- ng-model directive
- ng-bind directive
Let's discuss the AngularJS directive in detail.
ng-app directive
Start an AngularJS application with this directive. The root element is defined by the ng-app directive. When a web page containing an AngularJS web application is loaded, it launches the application and bootstraps it automatically. An AngularJS app is used to load different AngularJS modules.
Syntax
The ng-app directive syntax shows in below with html elements.
|
<div ng-app=""> Write Development Code! </div> |
ng-init directive
This command sets up application content or data. The ng-init directive sets up the information for an AngularJS web application. It specifies an AngularJS application's starting elements with initial and default information.
Syntax
The ng-init directive syntax shows in below with html elements.
|
<div ng-app="" ng-init="value"> Write Development Code! </div> |
ng-bind directive
The ng-bind directive allows replacing the content of an HTML element with both an expression and the value of a given variable. This directive shows the output of the vale on the required position on the AngularJS application.
Syntax
The ng-bind directive syntax shows in below with html elements.
|
<div ng-app=""> <p> output value: <span ng-bind = "output_expression"></span> </p> </div> |
ng-model directive
AngularJS's ng-model directive specifies the variable model that will be used. The ng-model helps bind user input information and displays it on a similar page. It uses the <input> tag for dynamic application information.
Syntax
The ng-model directive syntax shows in below with html elements.
|
<div ng-app=""> <input type="text" id="uname" ng-model="output_value"> Write Development Code! </div> |
Examples
The examples show that it requires an essential directive in detail.
Example #1:
ng-app directive: the following example shows the "ng-app" directive in web application.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script> </head> <body> <b> AngularJS ng-app Directive </b> <div ng-app = ""> <p> Output Value: <b> {{ "AngularJS Directives" }} </b>.</p> <p> Output of Equation: <b> {{6*2+2-4}} </b> Value.</p> </div> <b> AngularJS Without ng-app Directive </b> <div> <p> Output of Equation: <b> {{6*2+2-4}} </b> Value.</p> </div> </body> </html> |
Output
 |
Example #2:
ng-init directive: the following example shows the "ng-init" directive in web application.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <b> AngularJS ng-init Directive </b> <div ng-app = "" ng-init="test1=61;test2=9;test3='AngularJS';"> <p> Output Value: <b> {{test3}} </b>.</p> <p> Output of Equation: <b> {{test1*test2-test2}} </b> Value.</p> </div> </body> </html> |
Output
 |
Example #3:
ng-bind directive: the following example shows the "ng-bind" directive in web application.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <b> AngularJS ng-init Directive </b> <div ng-app = "" ng-init="test1=61;test2=9;test3='AngularJS';"> <p> Output Value: <b> <span ng-bind = "test3"></span> </b>.</p> <p> Output of Equation: <b> <span ng-bind = "test1*test2-test2"></span> </b> Value.</p> </div> </body> </html> |
Output
 |
Example #4:
ng-model directive: the following example shows the "ng-model" directive in web application.
|
<!DOCTYPE html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> <b> AngularJS ng-model Directive </b> <div ng-app = "" ng-init="test1=61;"> <p> Tutorial : <input type = "text" ng-model = "userdata1" placeholder = "Enter Username here"></p> <p><b> <span ng-bind = "userdata1"></span></b> Tutorial.</p> <p> Welcome to <b>{{userdata1}}</b> Tutorial.</p> </div> </body> </html> |
Output
 |
Summary
The directive is the required function to develop the AngularJS web application. The directives work for AngularJS functions and features. We cannot create AngularJS applications without directives