Post
Ask Question

Example to illustrate Controllers in Angularjs

Recently I started exploring Angular js and came across the concept of controllers. So I decided to write a small application two calculate the sum of two numbers.

To start with, what I have understood is that the controllers are used to manage the data flow between the view and data model. It uses $scope for this purpose. So let's create a sample application, to understand it. For this, we create an angular module and add the controller to it:

  1. var angApp = angular.module('angApp', []);  
  2.   
  3. angApp.controller('sumController', function ($scope) {  
  4.   
  5. }  
  6. });  
Further, we will have two properties named firstNumber and secondNumber and a function to calculate their sum, named addNumbers. Controller will receive the data through the $scope function.So the controller will look like:
  1. var angApp = angular.module('angApp', []);  
  2. angApp.controller('sumController', function ($scope) {  
  3.   
  4. $scope.firstNumber = 1;  
  5. $scope.secondNumber = 2;  
  6.   
  7. $scope.addNumbers = function () {  
  8. return $scope.firstNumber * $scope.secondNumber;  
  9. }  
  10. });  
Now it's time to bind the controller to the view. Add an html page and refer to the angular js using external references.

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

Add a div with textboxes to get input for 2 numbers, from user. Bind the controller to the div using the ng-controller directive,
  1. <div ng-app=" angApp " ng-controller='sumController'>  
  2. </div>  
Bind the textboxes with model properties using ng-model directive. So our textboxes will look like the following:
  1. <input type="text" ng-model="firstNumber">  
  2. <input type="text" ng-model="secondNumber">  
Finally we display the sum by binding the addNumbers method with a span tag, using angular expressions.
  1. <span>{{ addNumbers() }}</span>  
Complete html code will look like the following:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>  
  7.     <script type="text/javascript" src="sumController.js"></script>  
  8. </head>  
  9.   
  10. <body>  
  11.     <div ng-app="angApp" ng-controller="sumController">  
  12.         <fieldset>  
  13.             <legend>Calculate sum using Controllers</legend>  
  14.             <p>  
  15.                 Enter the first number:  
  16.                 <input type="text" ng-model="firstNumber">  
  17.             </p>  
  18.             <p>  
  19.                 Enter the second number:  
  20.                 <input type="text" ng-model="secondNumber">  
  21.             </p>  
  22.             <p>  
  23.                 Sum is:  
  24.                 <span>{{ addNumbers() }}</span>  
  25.             </p>  
  26.         </fieldset>  
  27.     </div>  
  28. </body>  
  29.   
  30. </html>  
Run the application and change the values and see the results.

app
Hope you liked my first article on angularjs. Since this is my first one on this topic, any feedback and suggestions are welcome.