AngularJS directives



In the previous chapter we have already seen basics of AngularJS and expressions used in AngularJS. This tutorial explains the AngularJS directives in simple and easy way

AngularJS Directives

AngularJS directives are used for extending HTML elements. AngularJS directives usually starts with ng- prefix.

Below is the list of few AngularJS directives –

Directive Explanation
ng-app Directive used to start an AngularJS Application
ng-init Directive used to initialize application data
ng-model Directive used to define a model (i.e variable to be used in AngularJS application)
ng-repeat Directive used to repeat html elements

Examples

AngularJS Directives #1 : ng-app

  1. In each AngularJS application ng-app directive is root element.
  2. ng-app directive is initialized automatically when a web page is loaded.
  3. ng-app directive is used to start an AngularJS application
  4. ng-app directive is used to load various AngularJS modules in an application

Consider the below example –

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

In this case we have defined a default AngularJS application using ng-app attribute of a body element.

Meaning of above code snippet is that we can include AngularJS syntax anywhere inside the body tag.

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

We can even define the default AngularJS application inside the div element. In the above example our AngularJS syntax can be recognized inside div element only.

AngularJS Directives #2 : ng-init

In order to initialized the data used inside the AngularJS application ng-init directive is used. Variables used inside AngularJS application are pre-initialized befoe execution of AngularJS application.

Recommanded Article : Initializing values inside AngularJS application

<div  ng-app="" ng-init="student = [{subject:'MAT',marks:'78'},
                                    {subject:'ENT',marks:'98'},
                                    {subject:'HND',marks:'90'}]">
</div>

In the above example, we have initialized an array of students using JSON array

AngularJS Directives #3 : ng-model

Variables or models used in the AngularJS application are defined using ng-model directive. In below example we have we have defined a model named fname & lname.

<div ng-app="">
  <p>Enter first Name: <input type="text" ng-model="fname"></p>
  <p>Enter last  Name: <input type="text" ng-model="lname"></p>
</div>

Example of ng-model directive

<!DOCTYPE html>
<html>

<head>
<script src="angular.min.js"></script>
</head>

<body>

<div  ng-app="">
  <p>Enter first Name: <input type="text" ng-model="fname"></p>
  <p>Enter last  Name: <input type="text" ng-model="lname"></p>

  <hr />

  <p>Youu first name : <span ng-bind="fname"></span></p>
  <p>Youu first name : <span ng-bind="lname"></span></p>
</div>

</body>
</html>

AngularJS Bind Expression

AngularJS Directives #4 : ng-repeat

ng-repeat directive repeats html elements for each item in a collection. In below example, we have iterated over array of students.

<!DOCTYPE html>
<html>

<head>
<script src="angular.min.js"></script>
</head>

<body>

<div  ng-app="" ng-init="students = [{subject:'MAT',marks:'78'},
                           {subject:'ENT',marks:'98'},
                           {subject:'HND',marks:'90'}]">
   <div id="container">
      <div class="list" ng-repeat="student in students">
         <p>Name of  subject : {{ student.subject }}</p>
         <p>Marks in subject : {{ student.marks }}</p>
      </div>
   </div>                     
</div>

</body>
</html>

Output :

Name of subject : MAT
Marks in subject : 78

Name of subject : ENT
Marks in subject : 98

Name of subject : HND
Marks in subject : 90