• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

Angular Directive

AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. AngularJS directives are what controls the rendering of the HTML inside an AngularJS application. Directives are a core AngularJS feature.

From the framework directives you will use every day like ng-model or ng-repeat, to your own custom directives that allow you to extend the vocabulary of the browser, if you are learning AngularJS, you need to have a solid understanding of Directives.

Directive types

AngularJS directives are extended HTML attributes with the prefix ng-.

The ng-app directive initializes an AngularJS application.

The ng-init directive initializes application data.

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-repeat directive  repeats html elements for each item in a collection

ng-app:  The root element which automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application.

Example: In this example we have defined a default AngularJS application using ng-app attribute of a div element.

<div ng-app = “”>

</div>

ng-init: It initializes an AngularJS Application data. It is used to put values to the variables to be used in the application.

Interested in mastering AngularJS Training? Enroll now for FREE demo on AngularJS Training.

Example: In this example we have initialize an array of countries. We’re using JSON syntax to define array of countries.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

ng-repeat: This directive repeats html elements for each item in a collection.

Example: In this example we’ve iterated over array of countries.

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
   
</div>

ng-model: The model/variable to be used in AngularJS Application.

Example: In this example we’ve defined a model named “name”.

<div ng-app = “”>

<p>Enter your Name: <input type = “text” ng-model = “name”></p>

</div>

Example: In this example, we can see all the above mentioned directives

<html>
   
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

For an Indepth knowledge on AngularJS, click on below

Summary
Review Date
Reviewed Item
Angular Directive
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on Angular Directive"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.