Простой калькулятор на AngularJS

Не так давно я сделал пример про сложение чисел на AngularJS. В этой статье мы создадим простой калькулятор на AngularJS.

Если вы следили за предыдущими статьями, тогда вы увидите, что в этот раз я разделил HTML и JavaScript.

HTML

Вы также увидите, что HTML все еще очень прост, хотя он содержит новый элемент. В этом примере объявления ng-app и ng-controller находятся в одном и том же элементе HTML. Зачем создавать дополнительный слой, если мы можем это все сделать в одном элементе div?

Кроме того у нас есть два элемента input и один select. Каждый из них имеет свой собственный атрибут ng-model.

Последняя часть HTML это директива {{ result() }}. Думаю, это первый раз, когда у нас в директиве указан вызов функции.

examples/angular/calculator.html

<script src= "angular.min.js"></script>
<script src= "calculator.js"></script>

<div ng-app="CalculatorApp" ng-controller="CalculatorController">
  <p><input type="number" ng-model="a"></p>
  <p><input type="number" ng-model="b"></p>
  <p><select ng-model="operator">
        <option>+</option>
        <option>*</option>
        <option>-</option>
        <option>/</option>
     </select></p>
  <p>{{ result() }}</p>
 </div>

view

JavaScript

В JavaScript мы создали модуль и контроллер Angular и описали функцию result как атрибут текущего $scope. Именно это позволяет использовать функции в директивах Angular внутри HTML.

JavaScript считает результат простых операций, там все очевидно, хотя и немного скучно.

examples/angular/calculator.js

angular.module('CalculatorApp', [])
    .controller('CalculatorController', function($scope) {
        $scope.result = function() {
            if ($scope.operator == '+') {
                return $scope.a + $scope.b;
            }
            if ($scope.operator == '-') {
                return $scope.a - $scope.b;
            }
            if ($scope.operator == '*') {
                return $scope.a * $scope.b;
            }
            if ($scope.operator == '/') {
                return $scope.a / $scope.b;
            }
        };
    });