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.
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:'[email protected]' }">
<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:'[email protected]' }"> <span ng-bind="customer.name"></span> <span ng-bind="customer.address"></span> <span ng-bind="customer.email"></span> </div> </body> </html>See Live Example
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"/>
<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: "[email protected]" }; } </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
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"/>
<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:'[email protected]'}, {firstName:'Paul', lastName:'Adam', email:'[email protected]'}, {firstName:'Peter', lastName:'England', email:'[email protected]'}, {firstName:'Rechard', lastName:'Jeff', email:'[email protected]'} ]; } </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