Introduction
In my previous articles I told you about:
This article explains the Controller in AngularJS. In AngularJS "Controller" has a different meaning, here the JavaScript Constructor function is referred to as a "Constructor" to augment the Angular Scope.
The Controller is called in DOM using the ng-controller directive, the Controller defines the initial state of the $scope object.
Now I will show you an example by which it will become easy for you to understand the Controller in AngularJS.
Step 1
First of all you need to add AngularJS to your application, for this you need to download it's external .js file that can be downloaded from the AngularJS Official Website, or you can download the Zip file provided at the top of this article or you can click on this link: AngularJS.
Now add this external file in the Head Section of your application:
<head>
<script src="angular.min.js"></script>
</head>
Step 2
The following is the ViewModel or script part of this application:
<script>
function ObservingCar($scope) {
$scope.cartest = 'Awesome';
$scope.test1 = function () {
$scope.cartest = 'Good';
}
$scope.test2 = function () {
$scope.cartest = 'Not Good';
}
}
</script>
Here ObservingCar is the Controller of this application, in this Controller the initial state of $scope is defined as "Awesome" that is defined in cartest.
Then two functions are created using $scope, the first function will change the value of cartest to "Good" and the second function will change the value of cartest to "NotGood".
Either of these functions will be called on the click of a button. Now the work on ViewModel is completed, so we just need to work on the View part.
Step 3
Now I will work on the View part or the design part of this application. I'll add two buttons and a few Labels that will help us to show the demonstration in an easy way.
<body>
<div ng-controller="ObservingCar">
<h2>How Do You Like The Car??</h2>
<h3>This Car is {{cartest}}</h3>
<button ng-click="test1()">Good</button>
<button ng-click="test2()">Not Good</button>
</div>
</body>
Now our application is created and is ready for execution.
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="angular.min.js"></script>
<script>
function ObservingCar($scope) {
$scope.cartest = 'Awesome';
$scope.test1 = function () {
$scope.cartest = 'Good';
}
$scope.test2 = function () {
$scope.cartest = 'Not Good';
}
}
</script>
</head>
<body>
<div ng-controller="ObservingCar">
<h2>How Do You Like The Car??</h2>
<h3>This Car is {{cartest}}</h3>
<button ng-click="test1()">Good</button>
<button ng-click="test2()">Not Good</button>
</div>
</body>
</html>
Output
On running the application you will get output like this:
![Controller in AngularJS]()
You can see that currently the initial value of $scope is shown in the output that was "awesome", but as I click on one of the buttons the value of $scope is updated and is reflected in the output.
![Controller in AngularJS]()
Now I again click on the "Next" button that was bound to other function of $scope and again the value of $scope is updated.
![Controller in AngularJS]()