Простой калькулятор на 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>Try!
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; } }; });

Published on 2015-10-25