Arithmetic Operation Using AngularJs

This is simple arithmetic calculator example using angularJS where I have used custom angularJS service.

UI

 

we have two inputs where we expect the user to enter numbers and hit any of the arithmetic actions

to show up the result in output box.

 

HTML markup

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="calcApplication.js"></script>
    <script src="calculatorService.js"></script>
   
</head>
<body ng-app="calculatorApp">
    <div ng-controller="calculatorController">

        Input A :
        <input type="text" name="inputA" ng-model="inputA" />
        <br />
        <br />
        Input B :
        <input type="text" name="inputB" ng-model="inputB" />
        <br />
        <br />
        <hr />
       
        <input type="button" name="Add" value="Add" ng-click="Addition(inputA,inputB)"  style="width:100px; height:30px;"  />
        <input type="button" name="Subtract" value="Subtract" ng-click="Subtraction(inputA,inputB)" style="width:100px; height:30px;" />
        <input type="button" name="Subtract" value="Multiply" ng-click="Multiplication(inputA,inputB)" style="width:100px; height:30px;" />
        <input type="button" name="Subtract" value="Divide" ng-click="Division(inputA,inputB)" style="width:100px; height:30px;" />
 
        <br />
      
        <hr />
        Output :
        <input type="text" name="inputB" ng-model="Output" />
    </div>

</body>
</html>

 

calcApplication.js  script

 

/// <reference path="Scripts/angular.min.js" />
var calcApp = angular.module('calculatorApp', [])
              .controller('calculatorController', function ($scope, AdditionService, SubtractionService, MultiplicationService, DivisionService) {
                  $scope.Addition = function (InputA, InputB) {
                      $scope.Output = AdditionService.Result(InputA, InputB);
                  }

                  $scope.Subtraction = function (InputA, InputB) {
                      $scope.Output = SubtractionService.Result(InputA, InputB);
                  }

                  $scope.Multiplication = function (InputA, InputB) {
                      $scope.Output = MultiplicationService.Result(InputA, InputB);
                  }
                  $scope.Division = function (InputA, InputB) {
                      $scope.Output = DivisionService.Result(InputA, InputB);
                  }

              });
 

 

calculatorService.js Script

 

 
/// <reference path="calcApplication.js" />
 
calcApp.factory('AdditionService', function () {
    return {
        Result : function (inputA, inputB) {
            var inputvalueA = 0;
            var inputvalueB = 0;

            if (angular.isUndefined(inputA))
            {
                inputA = 0;
            }
            if (angular.isUndefined(inputB))
            {
                inputB = 0;
            }

         
            inputvalueA = parseInt(inputA);
            inputvalueB = parseInt(inputB);
            return inputvalueA + inputvalueB;
        }
    };

});

calcApp.factory('SubtractionService', function () {
    return {
        Result: function (inputA, inputB) {
            var inputvalueA = 0;
            var inputvalueB = 0;
            if (angular.isUndefined(inputA)) {
                inputA = 0;
            }
            if (angular.isUndefined(inputB)) {
                inputB = 0;
            }

            inputvalueA = parseInt(inputA);
            inputvalueB = parseInt(inputB);
            return inputvalueA - inputvalueB;
        }
    };

});

calcApp.factory('MultiplicationService', function () {
    return {
        Result: function (inputA, inputB) {
            var inputvalueA = 0;
            var inputvalueB = 0;
            if (angular.isUndefined(inputA)) {
                inputA = 0;
            }
            if (angular.isUndefined(inputB)) {
                inputB = 0;
            }
            inputvalueA = parseInt(inputA);
            inputvalueB = parseInt(inputB);
            return inputvalueA * inputvalueB;
        }
    };

});

calcApp.factory('DivisionService', function () {
    return {
        Result: function (inputA, inputB) {
            var inputvalueA = 0;
            var inputvalueB = 0;
            inputvalueA = parseInt(inputA);
            inputvalueB = parseInt(inputB);
            return inputvalueA / inputvalueB;
        }
    };

});
 
 

ACTION

 

 

 

Add comment

Loading