Post
Ask Question

Understanding AngularJS Directives

AngularJS Directives

AngularJS directives extend HTML attributes. Using Angular Directives, we can bind data to HTML using an expression. We can do various things using AJS toolset like Controller that controls the data of an AJS application, filters to transform data (for examle uppercase, lowercase, orderby and so on) and validation that validates input data. We will be dealing with all those terms one by one.

Let's start with directives

An earlier web page first came out designed to display static pages. But these days web pages have become very dynamic. This was only possible due to JavaScript, jQuery and other toolsets. Angularjs is far better then previous libraries we used that allows us to extend HTML by adding attributes, elements and comments.

These are actually extended HTML attributes with the prefix -ng or data-ng. In case we want to make our page HTML5 valid we use data-ng instead of the ng- prefix.

In this article we will be dealing with some common AngularJS directives.

Some basic AngularJS Directives

  • ng-app
  • ng-model
  • ng-bind
  • ng-init
  • ng-repeat
  • ng-click

ng-app

It is used to define the root element and initializes our Angularjs application. It is normally placed near the root element of the webpage like <html> or <body> tags.

ng-model

It is responsible for binding a view to a model. Binds values of HTML controls to application data. It also provides the validation behaviour and also maintains the state of the control.

ng-bind

This attribute notifies Angularjs to replace the text content of a specified HTML element with the given expression value. It is also responsible for updating text content after the expression changes. In other words we can say that the ng-bind directive actually binds application data to the HTML view.

As attribute:

  1. <tag  
  2. ng-bind="">  
  3. ...  
  4. </tag>  

As CSS Class:

  1. <tag class="ng-bind: ;"> ... </tag>  

Let's see an example.



On pressing F5:

 



ng-init

The ng-init directive evaluates the expression <tag> {{}} </tag> in the current scope. Like another directive it can be used as attributes and CSS class. The application data is initialized by ng-init. Normally we use modules or a controller instead of ng-init.
  1. <tag  
  2. ng-init="">  
  3. ...  
  4. </tag>  
As CSS class:
  1. <tag class="ng-init: ;"> ... </tag>  
Let us look an example..

 
On pressing F5:


In the preceding example we used {{ location }} for AngularJS data binding, this basically synchronises AngularJS expressions with AngularJS data. If we look in the preceding example, we use the {{ location }} expression that is synchronized with ng-model="location".

Let us make a scenario where two text fields are synchronized with two different ng-model directives.

 
On pressing F5:



ng-repeat

The ng-repeat directive repeats an HTML element. It instantiates the template per collection, each template will get its own scope. The variable of the loop is set to the current collection item.
  1. <tag  
  2. ng-repeat="">  
  3. ...  
  4. </tag>  
Let's see an example.



On pressing F5:



Using ng-repeat on an array of objects:



On pressing F5:


ng-click

When an element is clicked to show behavior, AngularJS allows us to specify that behaviour of the element using the ng-clicked directive.
  1. <tag  
  2. ng-click="">  
  3. ...  
  4. </tag>  
Let us see an example.



On pressing F5:



After clicking the button:



Summary

So far we learned some common directives and will continue the rest in future articles. Stay connected with this series of AngularJS.
Happy Learning!


Similar Articles