Post
Ask Question

Understanding Controllers In AngularJS

Introduction

In my previous article “AngularJS Overview” and "Data Binding in AngularJS", we saw an overview of AngularJS features, a hello world application and data binding in AngularJS. This article explains controllers in AngularJS.

AngularJS Controllers

Controller in AngularJS is nothing but JavaScript constructor function that uses the Angular scope. It also controls the data of the application. Controller function is attached with DOM object. The ng-controller directive helps to define controller. When the ng-controller directive find by the AngularJS application, it will instantiate a new Controller object and create a new child scope ($scope) and it made available as an injectable parameter (to the Controller's constructor function). Controller is heart of AngularJS application and it mainly contains the business logic, so it is not good idea to put presentation logic into Controllers, it may affect controller's testability.

We can define controller in the following two ways:

  1. Define Controller as application module

    Normally angular developer uses this approach. In this approach, angular application has been defined and controller has been added in this angular application.
    1. angular.module("myapp", [])  
    2. .controller("appController", function($scope) {  
    3.    // definition of controller  
    4. } );  
  2. Controller define as JavaScript function

    We can also define controller as JavaScript function. In this function, we can also inject the dependency.
    1. function controllerAsFunction($scope){  
    2.    $scope.myName = "Tejas Trivedi";  
    3. }  
    Full example:
    1. <!DOCTYPE html>  
    2. <html>  
    3.   
    4. <head>  
    5.     <title>Understanding Controllers and Services In AngularJS</title>  
    6.     <script src="angular.js"></script>  
    7. </head>  
    8.   
    9. <body ng-app="myapp">  
    10.     <h4>Controller Example</h4>  
    11.     <br/>  
    12.     <br/>  
    13.     <div>1) Application.controller</div>  
    14.     <div ng-controller="appController">  
    15.         <div> My Name (app.contrller): {{myName}} </div>  
    16.     </div>  
    17.     <br/>  
    18.     <br/>  
    19.     <div>2) Controller as function</div>  
    20.     <div ng-controller="controllerAsFunction">  
    21.         <div> My Name (controller as function): {{myName}} </div>  
    22.     </div>  
    23.   
    24.     <script>  
    25.         angular.module("myapp", [])  
    26.             .controller("appController", function($scope) {  
    27.                 $scope.myName = "Jignesh Trivedi";  
    28.             });  
    29.   
    30.         function controllerAsFunction($scope) {  
    31.             $scope.myName = "Tejas Trivedi";  
    32.         }  
    33.     </script>  
    34. </body>  
    35.   
    36. </html>  
    Output:

    controller example

Scope Inheritance

As described earlier, the ng-controller directive always creates a new child scope, so that we can get a hierarchy of scopes that inherit from each other. Each $scope variable of the controller will have access to the properties and methods define by the controllers.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Understanding Controllers and Services In AngularJS</title>  
  5.     <script src="angular.js"></script>  
  6. </head>  
  7. <body ng-app="myapp">  
  8.     <h4>Scope Inheritance Example</h4>  
  9.     <div>  
  10.         <div ng-controller="ParentController" style="border: solid 2px red; padding: 15px;">  
  11.             <div> Hi, My name is {{name}} </div>  
  12.   
  13.             <div ng-controller="firstChildController" style="border: solid 2px red; padding: 15px;">  
  14.                 <div> Hi, My name is {{name}} </div>  
  15.   
  16.                 <div ng-controller="secondChildController" style="border: solid 2px red; padding: 15px;">  
  17.                     <div> Hi, My name is {{name}} </div>  
  18.                 </div>  
  19.             </div>  
  20.         </div>  
  21.     </div>  
  22.   
  23.     <script>  
  24.         var app = angular.module("myapp", []);  
  25.         app.controller("ParentController", function ($scope) {  
  26.             $scope.name = "Jignesh Trivedi";  
  27.         });  
  28.   
  29.         app.controller("firstChildController", function ($scope) {  
  30.             $scope.name = "Tejas Trivedi";  
  31.         });  
  32.         app.controller("secondChildController", function ($scope) {  
  33.             $scope.name = "Rakesh Trivedi";  
  34.         });  
  35.     </script>  
  36. </body>  
  37. </html>  
Output

Scope Inheritance

In preceding example, we nested three ng-controller directives in the template. All the controllers have same name property and all controllers hide their parent properties. This works exactly as heritance works.

Controller Alias

When we use "Controller as" syntax, we declare our controller in view with alias. Here we use "Controller as alias" instead of injecting $scope in to our controller. We can also use “controller as” in directive.

Syntax

 

    ng-controller=”testController as t1”

Inside the controller, declare function and variables on the "this" keyword instead of binding them with the $scope.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Understanding Controllers and Services In AngularJS</title>  
  5.     <script src="angular.js"></script>  
  6. </head>  
  7. <body ng-app="myapp">  
  8.     <h4>Controller Alias Example</h4>  
  9.     <div>  
  10.         <div ng-controller="TestController as t1">  
  11.             <div> Hi, My name is {{t1.name}} </div>  
  12.         </div>  
  13.     </div>  
  14.     <script>  
  15.         var app = angular.module("myapp", []);  
  16.         app.controller("TestController", function () {  
  17.             this.name = "Jignesh Trivedi";  
  18.         });  
  19.     </script>  
  20. </body>  
  21. </html>  
Output:

Controller Alias

Define method(s) / function(s) in Controller

Controller can have functions and methods which are directly or indirectly invoked by the view.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Understanding Controllers and Services In AngularJS</title>  
  5.     <script src="angular.js"></script>  
  6. </head>  
  7. <body ng-app="myapp">  
  8.     <h4>Function / Method Example</h4>  
  9.     <div>  
  10.         <div ng-controller="TestController">  
  11.             <div> <button ng-click="clickMe()">Click me</button> </div>  
  12.         </div>  
  13.     </div>  
  14.     <script>  
  15.         var app = angular.module("myapp", []);  
  16.         app.controller("TestController", function ($scope) {  
  17.             $scope.clickMe = function () {  
  18.                 alert('Hi, Jignesh!!');  
  19.             };  
  20.         });  
  21.     </script>  
  22. </body>  
  23. </html>  
Output:

Output

Summary

Controller is a JavaScript function that contains all client side business logic. It can communicate with DOM object.

 


Similar Articles