AngularJS Directives

Directive are core feature of AngularJS. In AngularJS, directive you can think as special type of attribute used in HTML DOM to perform specific operation. AngularJS ships with set of directives such as ng-repeat, ng-bind etc. All AngularJS directives prefixed with the ng namespace. AngularJS allow you to write your own directives for Angular to use. AngularJS directives has the ability to execute methods, define behavior, attach controllers and $scope objects, manipulate the DOM, and more.

In this tutorial you will see some of commonly used directives.

AngularJS ng-init

This directive is used to initializes an AngularJS Application data. This allow you to assign value to your scope variables.

Syntax

<div ng-init="customer={name:'Jimi',address:'12-13-283/A1',email:'jimi@yaho.com' }">

AngularJS ng-init Example

<html>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
</head>
<body>
<div ng-app="">
<div ng-init="customer={name:'Jimi',address:'12-13-283/A1',email:'jimi@yaho.com' }"> 
<span ng-bind="customer.name"></span>
<span ng-bind="customer.address"></span>
<span ng-bind="customer.email"></span>
</div>
</body>
</html>

See Live Example

AngularJS ng-bind

This directive is used to display value from model object define in model and set variable values.

Syntax

<html ng-app="">
<input type="text" ng-model="name"/>
<span ng-bind="name"/>

AngularJS ng-bind Example

<html>
<head>
<title>My first AngularJS ng-bind Directive code</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</script>
<script>
//Defining Controller Using Standard Javascrip Object Constructor
function CustomerController($scope) {
  $scope.customer = { name: "Jimi Scott", address: "12-13-283/A1", email: "Jimi@yahoo.com" };
}
</script>
</head>
<body>
<div ng-app="">
<div ng-controller="CustomerController"> 
<span ng-bind="customer.name"></span>
<span ng-bind="customer.address"></span>
<span ng-bind="customer.email"></span>

</div>
</div>
</body>
</html>

See Live Example

AngularJS ng-repeat

This directive is used to loop through a collection and creates new template for each item.

Syntax

<input type="text" ng-repeat="student in students"/>

AngularJS ng-repeat Example

<html>
<head>
<title>My first AngularJS ng-repeat Directive code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
function appController($scope) {
    $scope.students = [
  {firstName:'Jimi', lastName:'Scotts', email:'jimi@xyz.com'},
  {firstName:'Paul', lastName:'Adam', email:'paul.a@xyz.com'},
  {firstName:'Peter', lastName:'England', email:'peter@xyz.com'},
  {firstName:'Rechard', lastName:'Jeff', email:'reachardjeff@xyz.com'}
];
}
</Script>
</head>
<body>
<div ng-app ng-controller="appController">
<ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="student in students">
      {{$index + 1}}. First Name <strong>{{student.firstName}} </strong>
	  Last Name <strong>{{student.lastName}}</strong> Email <strong>{{student.email}}</strong>.
    </li>
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>
</body>
</html>

See Live Example

« Previous