AngularJS Directives

Post Views: 102

AngularJS Directives

AngularJS Directives are attributes on a DOM element. This attributes are used by AngularJS HTML’s compiler to attach a behavior as per the directive attached to a DOM element.
Most directives starts with “ng-” prefix. AngularJS has built-in directives like ngApp, ngModel, ngRepeat, ngClass, etc.
Directives are a part of HTML element’s declaration. You can also create custom one for your app.
Example:

<input type="text" ng-modle="firstName"/>

Here, ng-model property gets attached to input element. An at runtime firstName property will be set on this input element.

Directive name	Description
ng-app	Root element of an AngularJS app. Start of an application and mandatory directive.
ng-controller	Specifices the name of the controller used for a View and binds the controller.
ng-model	Initializes and attaches a model variable to HTML element.
ng-init	Initializes a Variable, you can specify more than one variable name.
ng-bind	Binds a specified variable name to an element. Also it accepts AngularJS Expressions.
ng-click	Specifies an event listener on a HTML element when it is clicked.
ng-show	Shows or Hides a HTML element on the basis of variable name passed in Directive during declaration (true or false).
ng-hide	Hides a HTML element on the basis of variable name passed in Directive during declaration (true or false).
ng-repeat	Prints each elements in an array or collection specified during declaration. Similar to forEach loop.
ng-disabled	Disables a HTML control if the specified variable is true.
ng-readOnly	Makes a HTML control has read-only if the specified variable is true.
ng-if	Works like an if statement for the given expression or variable name.
ng-src	Specifies Image () source.

Directive ng-app & ng-controller:

ng-app is the root of your AngularJS application. ng-Controller specifies and attaches controller to HTML element.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]).controller("controller1", function($scope){
$scope.message = "I'm from Controller 1."
});

app.controller("controller2",function($scope){
$scope.message = "I was defined in Controller 2."
});

</script>
</head>
<body ng-app='myApp'>
<p ng-controller='controller1'> {{message}}</p>
<p ng-controller='controller2'> {{message}}</p>
</body>
</html>

VIEW DEMO

OUTPUT:

Directives: ng-bind, ng-init,ng-model

ng-init initializes variable value.
ng-model directive binds a variable value to a HTML control.
ng-bind directive binds a HTML element to the specified variable name during declaration.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>

<div ng-init='pageTitle="Hello AngularJS"'>

<h3>{{pageTitle}}</h3>
<hr/>
<p>Enter your Name: &nbsp; <input type='text' ng-model='name'/></p>
<span ng-bind="name"/>
</div>
</body>
</html>

VIEW DEMO

OUTPUT:

Directives: ng-click, ng-show, ng-hide

ng-click attaches a specified function to a HTML element control.

ng-show & ng-hide directive hides and shows a HTML control (They are opposite in functionality wise.)

ng-show true condition shows a HTML control.

ng-hide true condition hides a HTML control.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="show=true">
<input type="button" ng-click="show=!show"/>
<br/>
<p>Show variable value = {{show}}</p>
<p ng-show="show">I am ng-show control</p>
<p ng-hide="show">I am ng-hide control</p>
</div>
</body>
</html>

VIEW DEMO

Directive ng-repeat:

ng-repeat is used to print all the elements in an array or collection.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<div ng-init="colors=['Red','Blue','Green','Yellow','Purple','Black','Violet']">
<ul ng-repeat="color in colors">
{{color}}
</ul>
</div>
</body>
</html>

VIEW DEMO

OUTPUT:

This directive is useful in creating table from JSON data received from Web API. We will explore the same in later part of this course.

Directives ng-src, ng-readonly,ng-if

ng-src is used to specify image source.

ng-readonly directive is used to make HTMl control readonly.

ng-if directive creates or removes a HTML control on an expression specified during declaration.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app>
<div >
<img ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"/>

<p>
Read-Only: <input type="checkbox" ng-model="checked"/>
<br/><br/>
<input ng-readonly="checked" value="Check the Read-Only checkbox to lock"/>
</p>
<br/>
<p>
Create a Label below &nbsp;&nbsp;<input type="checkbox" ng-model="create"/>
<br/><br/>
<label ng-if="create">I will be gone if you un-check the above check box.</label>
</p>
</div>
</body>
</html>

VIEW DEMO

OUTPUT: