How To Create Own Directive In Angularjs

AngularJS | Directive

AngularJS is an open-source MVC framework which is very similar to the JavaScript framework.
Directives are markers on DOM element which tell Angular JS 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, Comment.

Why Use It ?

It gives support to create custom directives for a different type of elements.
A directive is activated when the same element or matching element is there in front.
It is used to give more power of HTML by helping them with the new syntax.
Directive classes, like component classes, can implement life-cycle hooks to influence their configuration and behavior.

Directive Components: The AngularJS directives extends the attribute with prefix ng-. Some directive components are discussed below:

ng-app: It is an auto bootstrap AngularJS application which says that all the AngularJS should have a root element.
Example:

< html >

< head >

< title >AngularJS ng-app Directive</ title >

< script src =

</ script >

</ head >

< body style = "text-align:center" >

< h2 style = "color:green" >ng-app directive</ h2 >

< div ng-app = "" ng-init = "name='GeeksforGeeks'" >

< p >{{ name }} is the portal for geeks.</ p >

</ div >

</ body >

</ html >

Output:
ng-controller: The ng-controller Directive in AngularJS is used to add 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:

<!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 >

< h2 >ng-controller Directive</ h2 >< 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:
ng-bind: It 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:

<!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 >

< h2 >ng-bind Directive</ h2 >

< 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 type of modular code will have multiple directives that can handle their own functionalities and data, and work should be isolation from other directives.
As an added benefit, the HTML page and Angular scripts become less messy and more organized.