AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It has the ability to change static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwise.
Directives are markers on the DOM element which tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element with its children. Simple AngularJS allows extending HTML with new attributes called Directives. AngularJS has a set of built-in directives which offers functionality to the applications. It also defines its own directives. A directive can be defined using some functions which are: Element name, Attribute, Class, and Comment.
Why use Directive in AngularJS?
- It gives support to creating custom directives for different types of elements.
- A directive is activated when the same element or matching element is there in front.
- It is used to give more power to HTML by helping them with the new syntax.
- Directive classes, like component classes, can implement life-cycle hooks to influence their configuration and behavior.
Please refer to the AngularJS Directives Complete Reference article for a detailed description of Directives.
Directive Components: The AngularJS directives extend the attribute with the prefix ng-. Some directive components are discussed below:
1. ng-app: The ng-app directive is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load.
Example: This example illustrates the implementation of the ng-app directive in AngularJS.
<!DOCTYPE html> <html>
<head>
<title>
AngularJS ng-app Directive
</title>
<script src=
</script>
</head>
<body style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3 style="color:green">ng-app directive</h3>
<div ng-app="" ng-init="name='GeeksforGeeks'">
<p>{{ name }} is the portal for geeks.</p>
</div>
</body>
</html>
|
Output:
2. ng-controller: The ng-controller Directive in AngularJS is used to add the controller to the application. It can be used to add methods, functions, and variables that can be called on some event like a click, etc to perform a certain action.
Example: This example illustrates the implementation of the ng-controller directive in AngularJS.
<!DOCTYPE html> <html>
<head>
<title>
ng-controller Directive
</title>
<script src=
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>ng-controller Directive</h3>
<br>
<div ng-controller="geek">
Name:
<input class="form-control" type="text" ng-model="name">
<br><br>
You entered:
<b>
<span>{{name}}</span>
</b>
</div>
<script>
var app = angular.module('app', []);
app.controller('geek', function($scope) {
$scope.name = "GeeksforGeeks";
});
</script>
</body>
</html>
|
Output:
3. ng-bind: The ng-bind directive is used to bind/replace the text content of a particular element with the value that is entered in the given expression. The value of specified HTML content updates whenever the value of the expression changes in the ng-bind directive.
Example: This example illustrates the implementation of the ng-bind directive in AngularJS.
<!DOCTYPE html> <html>
<head>
<title>
ng-checked Directive
</title>
<script src=
</script>
</head>
<body ng-app="gfg" style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>ng-bind Directive</h3>
<div ng-controller="app">
num1:
<input type="number" ng-model="num1" ng-change="product()" />
<br><br>
num2:
<input type="number" ng-model="num2" ng-change="product()" />
<br><br>
<b>Product:</b>
<span ng-bind="result"></span>
</div>
<script>
var app = angular.module("gfg", []);
app.controller('app', ['$scope', function($app) {
$app.num1 = 1;
$app.num2 = 1;
$app.product = function() {
$app.result = ($app.num1 * $app.num2);
}
}]);
</script>
</body>
</html>
|
Output:
Benefits of AngularJS Directive:
- Directives are helpful in creating repeat and independent code.
- They modularize the code by clubbing requirement-specific behavioral functions in one place. It does not create objects in the central controller and manipulate them using multiple JavaScript methods.
- Such a type of modular code will have multiple directives that can handle their own functionalities and data, and work should be isolated from other directives.
- As an added benefit, the HTML page and Angular scripts become less messy and more organized.