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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.