Search within TutorialsPark

AngularJS Modules : Controllers

Learn how to build AngularJS application using Controllers Modules, and Introduction

AngularJS Modules : Controllers

A Controller is an intermediary between the view and the data Model, it is one of the most critical modules of any AngularJS application.

The job of a controller is to expand the scope by adding data model and functions which then can then be displayed to the user.

When AngularJS encounters the directive ng-controller in the HTML code block, a constructor function is initiated by AngularJS.Generally, AngularJS applications have multiple controllers for various aspects.

AngularJS Modules: Creating a Controllers

Controllers are created using the method Module.controller, it can accept two arguments: 1. controller name, 2. a factory function to setup the controller when ready.

As a convention the name of the controller is suffixed with Ctrl. The dependencies of the controller is the function passed to the method Module.Controller. Dependencies are components required by the controller.

AngularJS provides a set of built-in services and features which are specified with argument names beginning with the symbol $. Eg : if the argument is $scope, it requires AngularJS to provide the scope of the controller.

Syntax: AngularJS ModulesController

AngularJS Controllers : Dependency Injection

The one key concept you need to know about controllers is the concept of Dependency Injection, it is used in many other framework in one form or another.

In the last example, the controller used $scope as an argument, it allows AngularJS to pass data to the view.Thus, the controller depends upon the $scope to perform its task.

Dependency Injection is used because it simplifies the way AngularJS deals with Dependencies, or resolving of dependencies between various components.

If not for Dependency Injection, we would need to locate $scope manually using some global variables and supply as an argument. The order of dependency matters as well.

Syntax: AngularJS ng-app Attribute

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.