AngularJS Directives

Directives are the most important components of any AngularJS application.Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behaviour to that DOM element. When AngularJS finds the directive at the time of rendering then it attaches the requested behaviour to the DOM element.

Although AngularJS comes with wide range of directives, you will often need to create application specific directives which we called as "Custom Directive".


Directives are the most important components of any AngularJS application.Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behaviour to that DOM element. When AngularJS finds the directive at the time of rendering then it attaches the requested behaviour to the DOM element.

Although AngularJS comes with wide range of directives, you will often need to create application specific directives which we called as "Custom Directive".


Notice in the following example there are two directives: ng-app and ng-model.

<html ng-app="">
<head>
<title>Hello World in AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<input ng-model="name"> Hello {{ name }}
</body>
</html>

AngularJS comes with couple of built-in directives, below are some of them.

  • ng-app- Auto bootstrap AngularJS application.

  • ng-init- Initializes AngularJS variables.

  • ng-model- Binds form elements such as input, select, checkboxes, textarea or customs ones to a property called $scope.

  • ng-repeat- Repeats HTML template once per each item in the specified collection.

  • ng-bind- Replaces the value of HTML control with the value of specified AngularJS expression.

ng-app Directive

The ng-app directive is entry point of AngularJS Application. It initializes the AngularJS framework automatically.when ng-app directive is used then the application will be recognized as AngularJS application.When ng-app directive is used in the document ,then it auto bootstrap the application.


See the Pen yOvdRq by Mukesh (@mrajpolaris) on CodePen.


In the above example, ng-app directive is placed in the body element. you will notice use of expressions ("{{" and "}}") to return variable values. In AngularJS, expressions allow you to execute some computation in order to return a desired value. For example {{ 2*2 }} will return 4. We will discuss expression in separate article for more clarity.

ng-app directive should be palced at root element (like <html>, <body> tags) of an HTML document,however you are free to place it in any Dom element ,the AngularJS framework will only process the corresponding DOM element and its child elements.Let us create a sample application to understand this.


See the Pen ng-app example by Mukesh (@mrajpolaris) on CodePen.


In the above example, ng-app directive is placed in the div element whose id is "testdiv". Therefore, AngularJS will only compile testdiv and its child elements only. It will not compile the parent or sibling elements of "testdiv" division.



ng-init directive

ng-init directive will be used to initialize variables in AngularJS application. We can initialize string, number, array, and objects in angularJS application.


initializing String variable

<div ng-app="" ng-init="firstName='Mukesh'">     

Initializing number

<div ng-app="" ng-init=" amount= 100"> 

Initializing Array

<div ng-app="" ng-init="myArr = [100, 200]">

Initializing Array of Object

<div ng-app="" ng-init="countries = [{language:'Hindi',name:'India'}, 
{language:'English',name:'United States'}, 
{language:'Mandarine',name:'China'}]">



Initializing Object

<div ng-app="" ng-init="person = { firstName:'Steve', lastName :'Jobs'}">



ng-init Example

The following example demonstrates ng-init directive that initializes variable of string, number, array, and object.


See the Pen angularJS first Application by Mukesh (@mrajpolaris) on CodePen.



ng-model:

ng-model directive defines the model/variable to be used in AngularJS Application. The ng-model directive is used for two-way data binding in AngularJS. It binds input, select or textarea elements to a specified property on the $scope object.

Example:


See the Pen ng-init example by Mukesh (@mrajpolaris) on CodePen.


As AngularJS provides two way binding, The scope property assign to the model will be applied to the control value, and any changes done on the control value will applied to scope property.

Note:- We will discuss two way data binding in separate article.


ng-bind :

The ng-bind directive binds the model property declared via $scope or ng-model directive or the result of an expression to the HTML element. It also updates an element if the value of an expression changes.


See the Pen qZgmJQ by Mukesh (@mrajpolaris) on CodePen.


ng-repeat :

ng-repeat directive repeats html elements for each item in a collection. This is the most important directive of AngularJS. We will discuss ng-repeat directive in separate article.

In following example, we've iterated over array of countries.


See the Pen ng-repeat by Mukesh (@mrajpolaris) on CodePen.





References :- AngulaJS Documentation



Related Articles

  1. Maven Overview




comments powered by Disqus