Add numbers with AngularJS

After writing the most basic examples, I wanted to create a small calulator with Angular. It is one of the simplest code examples I can imagine after the "Hello World" and "Echo" examples.

So I set out to create a page using AngularJS that will add two numbers.

Add naive

The naive solution, that did not work was to have two input elements with ng-model for 'a' and 'b' and then to have an expression adding the two values.

examples/angular/add.html

<script src="angular.min.js"></script>
<div ng-app>
  <input ng-model="a">
  <input ng-model="b">
  <h1>{{ a + b }}</h1>
</div>

view

Unfortunately JavaScript and thus Angular handles the input values as strings, even if they are really numbers in those strings and then using the + operator on the strings acts as concatenation. Thus, if we try the above examples and type 2 and 3 in the two boxes, we'll see 23 as output.

Add numbers with controller

First, just like in the Hello User example, we create a module and a controller Within the controller we create a function called AddNumbers attached to the $scope. In that function we take the values from the two input elements and convert them to Number with plain JavaScript function call. (In order to aviod using and undefined value we default both numbers to 0.) Then we add the values and assign it to the newly created sum attribute.

examples/angular/add_numbers_controller.js

angular.module('AddNumbersApp', [])
    .controller('AddNumbersController', function($scope) {
        $scope.AddNumbers = function() {
            var a = Number($scope.a || 0);
            var b = Number($scope.b || 0);
            $scope.sum = a+b;
        }
});

In the HTML file we can then use that sum attribute as part of a simple expression. In order to trigger the AddNumbers function, we also add ng-keyup attributes to both of the input elements:

examples/angular/add_numbers_controller.html

<script src="angular.min.js"></script>
<script src="add_numbers_controller.js"></script>
<div ng-app="AddNumbersApp">
    <div ng-controller="AddNumbersController">
        <input ng-model="a" ng-keyup="AddNumbers()">
        <input ng-model="b" ng-keyup="AddNumbers()">
        <h1>{{ sum }}</h1>
    </div>
</div>

view

Try it! It works great!

While I was writing this I had this thought that there must be a more simple solution, that this might be over-engineering this problem and indeed there is a much easier solution.

Add numbers

As it turns out it is quite easy to tell Angular that we would like to treat the values as numbers. We only need to add type="number" to each one of input elements:

examples/angular/add_numbers.html

<script src="angular.min.js"></script>
<div ng-app>
  <input ng-model="a" type="number">
  <input ng-model="b" type="number">
  <h1>{{ a + b }}</h1>
</div>

view