Microsoft Dot Net Master: AngularJS

Monday, March 9, 2015

AngularJS - Controllers

AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object that contains attributes/properties, and functions. Each controller accepts $scope as a parameter, which refers to the application/module that the controller needs to handle.

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

Here, we declare a controller named studentController, using the ng-controller directive. We define it as follows:

<script>
function studentController($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
}
</script>

The studentController is defined as a JavaScript object with $scope as an argument.
The $scope refers to application which uses the studentController object.
The $scope.student is a property of studentController object.
The firstName and the lastName are two properties of $scope.student object. We pass the default values to them.
The property fullName is the function of $scope.student object, which returns the combined name.
In the fullName function, we get the student object and then return the combined name.
As a note, we can also define the controller object in a separate JS file and refer that file in the HTML page.

Now we can use studentController's student property using ng-model or using expressions as follows:

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

We bound student.firstName and student.lastname to two input boxes.
We bound student.fullName() to HTML.
Now whenever you type anything in first name and last name input boxes, you can see the full name getting updated automatically.

Example

The following example shows the use of controller:

testAngularJS.htm

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Output

Open the file testAngularJS.htm in a web browser and see the result.