Directives in Angularjs

AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. We’re going to discuss following directives −

-ng-app − This directive starts an AngularJS Application.

-ng-init − This directive initializes application data.

-ng-model − This directive defines the model that is variable to be used in AngularJS.

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

ng-app directive

ng-app directive starts an AngularJS Application. It defines the root element. It 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. In following example, we’ve defined a default AngularJS application using ng-app attribute of a div element.

<div ng-app = "">
   ...
</div>

ng-init directive

ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application. In following example, we’ll 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-model directive

ng-model directive defines the model/variable to be used in AngularJS Application. In following example, we’ve defined a model named “name”.

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

Inclined to build a profession as  AngularJs Developer? Then here is the blog post on 
AngularJs Training.
 

ng-repeat directive

ng-repeat directive repeats html elements for each item in a collection. In following 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>

Check out the top AngularJS Interview Questions now!
 

Example

Following example will showcase all the above mentioned directives.

testAngularJS.htm

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

Output

Open textAngularJS.htm in a web browser. Enter your name and see the result.a

For an Indepth knowledge on AngularJS, click on below

Summary
Review Date
Reviewed Item
Directives in Angularjs
Author Rating
51star1star1star1star1star

“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 Directives in Angularjs"

    Leave a Message

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

    Support


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

    3 + 5