Simple example to illustrate the controllers in Angular-js

Controllers are one of the very elegant way to communicate/pass data to the view. Simply create functions and properties in javascript, write the business logic and use the angular js directives and we are done. For this purpose, it uses $scope, which basically acts as a carrier of data between the controller and the view.

So let's create a sample calculator application, to illustrate how we can use the controllers in angular js. For this, add a javascript file and declare a controller with the following syntax:

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

mainApp.controller('calculatorController', function ($scope) {
 
    }
});

Here, the mainApp is the application level angular module and in this module we add or register a controller named calculatorController. The controller function accepts two parameters, where first one is the name of the controller and second represents the controller itself, with functions and properties we will use.

Within this controller, we will create the required properties and functions we need. We add two properties named firstNumber and secondNumber and a function to perform their sum using function named calculateSum. This is done through the use of $scope variable.So the controller will look like:

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

mainApp.controller('calculatorController', function ($scope) {

    $scope.firstNumber = 1;
    $scope.secondNumber = 2;

    $scope.calculateSum = function () {
        return $scope.firstNumber + $scope.secondNumber;
    }
});

Next, we simply need to bind this controller to the view. For this, we add an html page and add the reference to the external angular js using external reference. Also add reference to the external controller js file we created.

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js 

Further, we add a div and two textboxes inside it. We bind the controller to the div using the ng-controller directive, using following syntax:

<div ng-app="mainApp" ng-controller="calculatorController">
</div>

We bind the model properties i.e. firstNumber and secondNumber using the ng-model directive. So our textboxes will look like the following:

<input type="text" ng-model="firstNumber">
<input type="text" ng-model="secondNumber">

We display the sum of these two numbers in a span, by binding the calculateSum using the angular expressions syntax. Since the angular js support two way data-binding, through ng-model, when we change the values in the textboxes, the updated values get reflected in the span tag. So the span tag will look like the following:

   <span>{{ calculateSum() }}</span>

So our complete html form will look like:

Run the application and change the values and see the results.

Hope you enjoyed reading it. Happy coding...!!!