Controller Method of Angular Module in AngularJS

Introduction

In my previous article I explained Controllers in AngularJS.

In that article we used a Controller function in the Global Scope, AngularJS allows us to use a Controller in Global Scope but it is not recommended (by the AngularJS official website), instead we are asked to use the Controller method of the Angular Module.

This article will help you to understand how to use a Controller as a method of an Angular Module in AngularJS. I will work on a similar application in which we had worked on previously but this time a few things will be changed because this time we will not use the Controller in Global Scope.

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 as in the following:

<head>

</head>

Step 2

Now I will work on the ViewModel or Script part of this application.

var mod = angular.module('testmod', []);

mod.controller('carcontrol',['$scope',function ($scope) {

$scope.notgood = 'Not so Good';

$scope.cartest = 'Awesome';

$scope.test1 = function (cartest) {

$scope.cartest = cartest;

}

}]);

</script>

Here you can see that I created an object of the Angular module that will be accessed using "testmod", you can rename this module depending on your preferences.

Then the Controller method of the Angular Module is called whose name is written as "carcontrol". I had created a Controller function where a few initial values are provided that can be changed at run time. An argument is also passed in the controller as "cartest".

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>

<h3>This Car is {{cartest}}</h3>

</div>

</body>

Here Controller is assigned to the Div using the ng-controller. After this an initial value is passed to the Textbox in ng-model that will allow us to change this value at run time.

After this cartest is bound to the H3, that will help us to show what selection is made by the user because the value of this H3 tag will change depending on the change of selection made by the user.

Then two buttons are used, in the first button a static value is passed when the binding is done to the test1, so a click of this button will pass this static value to the H3 tag.

Now our application is created and can be run to check how it's working.

The complete code of this application is as follows:

<head>

var mod = angular.module('testmod', []);

mod.controller('carcontrol',['$scope',function ($scope) {

$scope.notgood = 'Not so Good';

$scope.cartest = 'Awesome';

$scope.test1 = function (cartest) {

$scope.cartest = cartest;

}

}]);

</script>

</head>

<body>

<h3>This Car is {{cartest}}</h3>

</div>

</body>

</html>

Output

On running the application the default values will be seen by the user.

.controller method of Angular Module

Now if the user clicks on the first button then value of H3 will change depending on the value bound to this button.

.controller method of Angular Module

Now If I click on the second button then whatever value is passed through the Textbox will be shown in the H3.

.controller method of Angular Module

Now I am changing the value in the Textbox, you can see that the value of H3 is changed accordingly.

.controller method of Angular Module