Сложение чисел с AngularJS

После написания самого простого примера, я захотел создать небольшой калькулятор с помощью Angular. Это один из наиболее простых примеров кода, которые я могу представить после "Hello World" и "Echo".

Так что я решил создать страницу с помощью AngularJS, которая сложит два числа.

Наивный подход

Наивным решением, которое не сработало, было создать два элемента input с ng-model 'a' и 'b', и затем написать выражение, складывающее эти два значения.

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

К сожалению, JavaScript, а следовательно и Angular, обрабатывают введенные значения как строки, даже если это на самом деле числа. Поэтому использование оператора + для строк приводит к их конкатенации. Следовательно, если мы попробуем пример выше и введем в поля 2 и 3, то получим в результате 23.

Сложение чисел с помощью контролллера

Сначала, как мы делали в примере Hello World, мы создали модуль и контроллер. Внутри контроллера мы создали функцию AddNumbers, связанную со $scope. В той функции мы получаем значения для двух элементов input и преобразовываем их в Number с помощью вызова функции JavaScript. (Чтобы избежать использования значения undefined, мы присваиваем значение по умолчанию равное 0.) Затем мы суммируем значения и присваиваем полученное к созданному атрибуту sum.

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;
        }
});

Затем в HTML мы можем использовать этот атрибут sum как часть простого выражения. Для вызова функции AddNumbers, мы также добавили атрибут ng-keyup к обоим элементам input:

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

Попробуйте! Это великолепно работает!

Пока я это писал, подумал, что должно быть более простое решение, так как такой способ выглядит слишком сложным. И в самом деле, более простое решение существует.

Сложение чисел

Как оказалось, достаточно просто указать Angular, чтобы он оперировал со значениями, как с числами. Мы просто добавляем type="number" к каждому элементу input:

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