AngularJS Controllers

In the articles on MVC, we briefly reviewed what MVC pattern is and how AngularJS implements it via model, views and controllers. In this article, we are going to study AngularJS controllers in detail. Simply put, AngularJS controller controls the flow of data in the application. Angular.js Controllers are responsible for interaction between models and views. AngularJS controllers are nothing but simple JavaScript objects. These objects contain attributes and functions. A controller accepts $scope variable as a parameter. This variable defines the scope of the module or application that the controller will handle.

Declaring AngularJS Controllers

AngularJS controllers are declared via “ng-controller” directive. Similarly, to define a controller, you have to create controller object via JavaScript. Take a look at the following example. The code has been explained in the following section.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

           
      <div ng-app = "SumApp" ng-controller = "SumController">
         First Number: <input type = "text" ng-model = "Sum.num1"><br><br>
         Second Number: <input type = "text" ng-model = "Sum.num2"><br>
         <br>
         
         Sum of Numbers: {{Sum.TotalSum()}}
      </div>
      
      <script>
         var mainApp = angular.module("SumApp", []);
         
         mainApp.controller('SumController', function($scope) {
            $scope.Sum = {
               num1: 10,
               num2: 30,
               
               TotalSum: function() {
                  var SumObject;
                  SumObject = $scope.Sum;
                  return SumObject.num1 + SumObject.num2;
               }
            };
         });
      </script>  
    
    
</body>
</html>

Download the code Try the code

Now pay close attention to the above code, we shall start from the div with attribute “ng-app”. In all the past articles, we didn’t enter value for this attribute. However, in the above code “ng-app” has a value “SumApp”. This is the name of the module. We shall see more about modules in upcoming articles. For now, just keep in mind that modules are containers for AngularJS application. If you want to create multiple AngularJS applications within one webpage, you can use multiple modules.

Next, using “ng-controller” directive, we have declared a “SumController“. This means that inside this div, we can use models defined inside the SumController object.

Now, leave the rest of the code inside the div and come straight down to the script section. Here we create a controller object named “SumController“. Inside this controller, we create Sum object via “$scope” variable. The sum object has two variables, num1 and num2; and a function “TotalSum” which returns the sum of num1 and num2 variables.

We have created our controller and model. Now is the time to bind the model with the view. Go back to the div where we declared controller. Here we have bound two text boxes with num1 and num2 variables of sum object. Similarly, using an expression, we bound the inner html of the body to the output of “TotalSum” function of the model. Now, enter random numbers int the text boxes. The sum will be updated at run time.

<<< AngularJS Data TypesAngularJS Models >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .