Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | Directive

  • Last Updated : 28 Jun, 2019

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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :