Controller in AngularJS

Introduction

In my previous articles I told you about:

• Creating Hello World Example Using AngularJS
• Various Ways of Initializing AngularJS

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:

Step 2

The following is the ViewModel or script part of this application:

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.