Search within TutorialsPark

AngularJS Directives : Introduction

Learn how to use AngularJS Directives to assign special behaviour to HTML elements by assigning them new capabilities.

AngularJS Directives : What are Directives

Of all the features of AngularJS one of the most exiciting feature is directives. Directives are used to expand the use of HTML elements by assigning them new capabilities.

In the previous chapters, we have already used some simple directives like ng-controller, ng-show , ng-hide etc. Advanced application make comprehensive use of custom directives as well.

Directives are used to assign special behaviour and capabilities to an HTML element.Eg: Consider the directive ng-repeat, it assign a new capability to the applied element by repeating it multiple times , ng-controller is used to attach a controller to the element(i.e view)

Lets see a practical problem, if a user wants a slider within a document, a normal HTML element cannot be used, by using a directive you can transform the element into a slider by attaching event listeners and other DOM manipulations.

AngularJS Directives : Where can we use Directives?

Directives can modify or create elements with totally new capabilities, directives can be used with simple HTML elements to sophisticated interfaces with connectivity between client and database.

AngularJS provides about 50 odd built-in directives for general level functionality, to push the limit further you can create your own custom directives.

Directives can be used for event handling, from Validation, data binding etc. It can be used anywhere within the AngularJS Application.

AngularJS Directives : Types of Directives

We have used Directives in all previous examples, and all were attribute directives. But directives can take a lot of different forms. It can be in form of attribute, Element, Class and Comment.

For most practical purposes, the class and comment form is rarely used.

Syntax: AngularJS Directive Forms

AngularJS Directives : Applying Directives

Though we have seen examples in previous chapter, for the sake of proper understanding the application of basic directive is shown below.

The demo, shows an AngularJS application to keep track of bills paid/unpaid.Firstly, the module and controllers are created then the service $scope is used to add data items, and the directives of ng-app and ng-controller are used to apply module and controller to HTML elements.

Syntax: AngularJS Directives Applying Directives

Give it a TRY! » Note: The app has no functionality now, and it just show how to apply directives to an element.

AngularJS Controllers : Applying Controllers to View

After setting up controllers, next logical step is to apply them to the HTML document, thus letting AngularJS know the location of view.

The attribute ng-controller is used to set the view , the value of the attribute is the name of the controller.

Example: Angular JS Controller Applying Controllers to View

Give it a TRY! » Note: The $scope to provide the view with data, only data configured using $scope are useful in expression and data-binding.

AngularJS Controller : Create Multiple Views

The way the data from the model is presented to the user is called view, each controller supports multiple views, meaning same data can be displayed in different ways based on user requirements.

In the demo, the attribute ng-controller is used twice to create two views, the property lectures is used along with scope to create the first view, while the second view also makes use of the same property to create another view.

Example: Angular JS Controllers Create Multipe Views

Give it a TRY! » Note:The property lecture is extended to calculate the value in the second view.

AngularJS Controllers : Creating Multiple Controllers

A Real application cannot function using just a single controller, all applications have more than one controller.

In the demo, the controller dayBeforeYesterday is which computes the lecture scheduled day before Yesterday, i.e two days before.

Example: Angular JS Controllers Creating Multiple Controllers

Give it a TRY! » Note: The Second controller computes, the lecture two days before the current day.