Post
Ask Question

What Are Directives In AngularJS: Part Three

Before starting the article, I suggest you to go through my previous two articles on AngularJS:

Now let’s start with directives in AngularJS.

What are Directives?

AngularJS directives are only used to extend HTML and DOM element's behavior. These are special attributes starting with ng- prefix that tell AngularJS's HTML compiler ($compile) to attach a specified behaviour to that DOM element.

AngularJS having a set of built-in directives like:

  • ngBind,
  • ngModel
  • ngClass
  • ngApp
  • ngInit
  • ngRepeat

    And more...

And also we can create our own directives for Angular to use them in our AngularJS application with controllers and services too. So in this article we’ll learn about some most important built-in directives like: ng-app, ng-init, ng-model, ng-bind and ng-repeat.

  • ng-app: It is the most important directive for an angular application which is used to indicate starting of an angular application to AngularJS HTML compiler ($compile) like a “Main()” function in any compile time language like C#, Java or C++ or many more. If we doesn’t use this directive first and directly try to write other directives, it gives an error. In other words, ng-app gives a space or block to write or use angular expressions and compile them with the help of AngularJS HTML compiler ($compile). So when we want to use this directive in our html page so use this into any html tag (<body/>, <table/>, <div/>, <p/>) like:

    <body ng-app=””> … </body>in this directive we need to pass the name of our angular application class name if we write that code into external js file but if we don’t have any external js file so no need to pass any name into this directive. At that time we are just using inline code.

    inline code

    If we want to use multiple Angular applications on the same page  never use this directive with <body/>. In that case use any other type of block like <div/> or <table/> which you like most.

  • ng-init: ng-init directive is used to initialize an AngularJS Application data variables inline statement so that we can use those in that specified block where we declared them. It is like a local member of that ng-app it could be a value or a collection of values as array it directly support JSON data.

    ng-init directive

    Code:
    1. <html>  
    2.     <head>  
    3.         <title></title>  
    4.         <metacharset="utf-8"/>  
    5.         <scriptsrc="Scripts/angular.min.js">  
    6.         </script>  
    7.     </head>  
    8.     <body>  
    9.         <divng-app="">  
    10.             <png-init="Users=['Nitin Pandit','SonuTyagi','Rahul Kumar']">  
    11.             </p>  
    12.             <png-init="UName='Nitin'">  
    13.             </p>  
    14.         </div>  
    15.     </body>  
    16. </html>  
  • ng-model: ng-model directive is used to define the model/variables value to be used in AngularJS Application’s html controls like <input type=’text’/> and it also provides two-way binding behavior with model value. In some cases it’s also use for databinding.

    ng-model directive

    Output:

    See result

    Code:
    1. <png-init="UName='Nitin'">  
    2.    <inputtype="text"ng-model="UName"/>  
    3. </p>  
  • ng-bind: ng-bind directive is also use to bind the model/variables value to AngularJS applications html controls and as well as with html tags attributes like: <p/>, <span/> and more but it’s not support two way binding we can just see the output of model values.

    ng-bind

    Output:

    result

    Code:
    1. <divng-app=""ng-init="UName='Nitin'">  
    2.     <png-bind="UName">  
    3.     </p>  
    4. </div>  
  • ng-repeat: ng-repeat directive is use to repeats html statement. Ng-repeat is work same as foreach loop in C#, java or php on a specific collection item like array.

    ng-repeat directive

    Output:

    run code

    Code:
    1. <body>  
    2.     <divng-app="">  
    3.         <png-init="Users=['Nitin Pandit','SonuTyagi','Rahul Kumar']">  
    4.             <ul>  
    5.                 <ling-repeat="item in Users"ng-bind="item">  
    6.                 </li>  
    7.             </ul>  
    8.         </p>  
    9.     </div>  
    10. </body>  
    Ng-repeat also have many filters to make filtration easy on client page directly on JSON collections so if we want to see my output in order by format so we can use orderBy filter in ng-repeat so now I just creat an array of json objects with a Name property and pass it to orderBy filter and what will be the output.

    orderBy

    Output:

    Output

    Code:
    1. <body>  
    2.     <divng-app="">  
    3.         <png-init="Users=[{Name:'Nitin Pandit'},{Name:'SonuTyagi'},{Name:'Rahul Kumar'}]">  
    4.             <ul>  
    5.                 <ling-repeat="item in Users| orderBy:'Name'"ng-bind="item.Name">  
    6.                 </li>  
    7.             </ul>  
    8.         </p>  
    9.     </div>  
    10. </body>  
    Now if we want to filter our collect so am going to use next filter attribute using pipe | sing to add more than one filter and just use an input type to get the value enter by user on which we have to find value.

    ng-model

    Output:

    run

    Gif Output:



    Code:
    1. <body>  
    2.     <divng-app="">  
    3. Search Details :   
    4.         <inputng-model="find"placeholder="Enter Name !!"/>  
    5.         <png-init="Users=[{Name:'Nitin Pandit'},{Name:'SonuTyagi'},{Name:'Rahul Kumar'}]">  
    6.             <ul>  
    7.                 <ling-repeat="item in Users|filter:find | orderBy:'Name'"ng-bind="item.Name">  
    8.                 </li>  
    9.             </ul>  
    10.         </p>  
    11.     </div>  
    12. </body>  

Hope you enjoyed this article and stay tuned for upcoming articles.

Read more articles on AngularJS:


Similar Articles