AngularJS Controllers

AngularJS applications mainly rely on controllers to control the data flow in the application. Controllers are usedng-controllerdefined by directives. A controller is a JavaScript object that contains properties/Properties and functions. Each controller accepts $scope as a parameter, which represents the application that the controller needs to handle/Module.

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

Here, we use ng-The controller directive declares a namedstudentControllerThe controller. We define 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>

studentController is defined as a JavaScript object and passed $scope as a parameter.
$scope refers to the application using the studentController object.
$scope.student is a property of the studentController object.
firstName and lastName are two properties of the $scope.student object. We pass default values to them.
The property fullName is a function of the $scope.student object, which returns the combined name.
In the fullName function, we get the Student object and then return the combined name.
Note that we can also define the controller object in a separate JS file and reference it in the HTML page.

Now we can use ng-model or the following expression uses the student property of studentController:

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

We bind student.firstName and student.lastname to two input boxes.
We bind student.fullName() to HTML.
Now, whenever you type anything in the name and surname input boxes, you can see that the full name will be automatically updated.

Online Example

The following example demonstrates the usage of controllers-

testAngularJS.htm

Example

<html>
　　　<head>
　　　　　　<title>AngularJS Controller</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS Controller Example</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　Enter name: <input type="text" ng-model="student.firstName"><br>
　　　　　　　　　<br>
　　　　　　　　　Enter surname: <input type="text" ng-model = "student.lastName"><br>"}}
　　　　　　　　　<br>
　　　　　　　　　You are entering: {{student.fullName()}}
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　　　　　　　lastName: "Parashar",
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Test and see‹/›

Output Results

Open the file in a web browsertestAngularJS.htmand view the results.

AngularJS Filters AngularJS Expressions

AngularJS Basic Tutorial

AngularJS Controllers

Online Example

testAngularJS.htm