AngularJS Tutorial

Define AngularJS

Download AngularJS

AngularJS Expression

AngularJS vs Javascript

AngularJS Directives

AngularJS Module

AngularJS Controller

Custom Directive

AngularJS Scope

AngularJS Validation

AngularJS Filter

AngularJS SelectBox

AngularJS Directive

AngularJS Services

AngularJS Directives

AngularJS Routing

Interview Questions

Angular Directives

AngularJS extends HTML with new attributes called Directives. AngularJS has a set of built-in directives which you can use to add functionality to your application.

AngularJS ng-app Directive

The ng-app directive tells AngularJS that this HTML page is an AngularJS application. All AngularJS applications must have a ng-app directive. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.


AngularJS ng-model Directive

The ng-model directive to bind data from the model to the view on HTML controls (input, select, textarea) to a variable created in AngularJS.


AngularJS ng-init Directive

The ng-init is used to initialize application data. Sometimes you may require some local data for your application, this can be done with the ng-init directive.


AngularJS ng-repeat Directive

The ng-repeat directive is used to repeats an HTML element.

<div ng-app="" ng-init="color=['Red','Green','Blue']">
<p>List of Colors:</p>
<ul> 
   <li ng-repeat="x in color">
      {{x}}
   </li>
</ul>
</div>

Example: The ng-repeat directive used on an array of objects.

<div ng-app ng-init="developer=[{name:'Tim Berners Lee', software:'HTML'}, {name:'Brendan Eich', software:'JavaScript'}, {name:'Misko Hevery', software:'AngularJS'}]">

<table> 
   <caption>List of Developers</caption>
   <tr>
      <th>Developer</th>
      <th>Technology</th>
   </tr>
   <tr ng-repeat="x in developer">
      <td>{{x.name}}</td>
      <td>{{x.software}}</td>
   </tr>
</table>

</div>