AngularJS controllers



In the previous chapters we have learnt about the AngularJS expressions and AngularJS directives. In this chapter we will be learning about the controllers in AngularJS

AngularJS Controllers Basics:

  1. ng-controller directive is used to define the controller in AngularJS.
  2. AngularJS controllers are used to control the flow of data in application.
  3. AngularJS controller is a JavaScript object having attributes and functions.
  4. AngularJS controller accepts $scope as a parameter.
  5. $scope parameter is used to refer the application or module controlled by controller.

Syntax of controller

We have declared a controller using the ng-controller directive

<div ng-app="" ng-controller="exampleContoller">
...
</div>

Definition of controller is written inside the script code block as shown below –

<script>
function exampleContoller($scope) {
      $scope.str1 = "123",
      $scope.str2 = "ABC",
      $scope.concatString = function() {
         return $scope.str1 + " " + $scope.str2;
      }
}
</script>

Explanation

In the above definition of AngularJS controller we have written following things –

  1. We have defined the AngularJS application using ng-app directive.
  2. Our AngularJS application runs inside a div tag.
  3. ng-controller directive is used for naming the AngularJS controller object.
  4. AngularJS controller is nothing but a standard JavaScript object constructor having same name as that of controller. i.e exampleContoller
  5. AngularJS will invoke exampleContoller function with a $scope object as parameter
  6. $scope is the application object which is an owner of application variables and functions

In this case we have created two application level properties and one application level method

Entity Explanation
str1 Application level property
str2 Application level property
concatString Application level method
$scope Application level object

Example

Example #1 : AngularJS controller

<!DOCTYPE html>
<html>

<head>
<script src="angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="exampleContoller">
  <p>Enter String 1 : <input type="text" ng-model="str1"></p>
  <p>Enter String 2 : <input type="text" ng-model="str2"></p>
</div>

<script>
function exampleContoller($scope) {
      $scope.str1 = "123",
      $scope.str2 = "ABC"
}
</script>

</body>
</html>

Output :
angularjs controller example 1

Example #2 : AngularJS controller (Method)

<!DOCTYPE html>
<html>

<head>
<script src="angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="exampleContoller">

<p>Enter String 1 : <input type="text" ng-model="str1"></p>
<p>Enter String 2 : <input type="text" ng-model="str2"></p>
<p>Result String : {{concatString()}}</p>

</div>

<script>
function exampleContoller($scope) {
      $scope.str1 = "123",
      $scope.str2 = "ABC",
      $scope.concatString = function() {
         return $scope.str1 + " " + $scope.str2;
      }
}
</script>

</body>
</html>

Output :
angularjs controller example 2

Example #3 : AngularJS controller (JSON Object)

<!DOCTYPE html>
<html>

<head>
<script src="angular.min.js"></script>
</head>

<body>

<div ng-app="" ng-controller="exampleContoller">

<p>Enter String 1 : <input type="text" ng-model="svar.str1"></p>
<p>Enter String 2 : <input type="text" ng-model="svar.str2"></p>
<p>Result String : {{svar.concatString()}}</p>

</div>

<script>
function exampleContoller($scope) {
   $scope.svar = {
      str1: "123",
      str2: "ABC",
      concatString : function() {
         var iObj;
         iObj = $scope.svar;
         return iObj.str1 + " " + iObj.str2;
      }
   };
}
</script>

</body>
</html>

Output :
angularjs controller example 2
Consider the below code for AngularJS controller –

function exampleContoller($scope) {
   $scope.svar = {
      str1: "123",
      str2: "ABC",
      concatString : function() {
         var iObj;
         iObj = $scope.svar;
         return iObj.str1 + " " + iObj.str2;
      }
   };
}

In this case we have defined an application level json object i.e svar, This application level object is again having the attributes and methods.

str1,str2 are attributes of json object while concatString is an method of json object