Простой in-memory счетчик с AngularJS
В статье о примерах счетчиков мы видели много вариантов реализации. Вот один с использованием AngularJS.
Простая кнопка для увеличения счетчика
examples/angular/in_memory_counter.html
<script src="angular.min.js"></script> <div ng-app> <button ng-init="counter = 0" ng-click="counter = counter + 1">Increment</button> {{counter}} </div>Try!
В этом примере у нас есть HTML кнопка с двумя Angular-атрибутами. Содержимое атрибута ng-init будет выполнено один раз во время загрузки страницы. Он задает начальное значение атрибута counter.
Содержимое атрибута ng-click будет выполняться каждый раз во время нажатия кнопки. Он будет увеличить счетчик на 1. (counter++ здесь не работает)
Когда страница загружается, мы видим кнопку "Increment" и число 0. Как только мы нажмем на кнопку, число увеличится на 1.
Кнопки для увеличения (инкремент) и уменьшения (декремент)
В следующем примере у нас есть новая кнопка - для уменьшения счетчика на 1. К тому же, чтобы этот шаг сделать более явным, мы перенесли атрибут ng-init в отдельный элемент div, который не отображается.
examples/angular/in_memory_counter_with_decrement.html
<script src="angular.min.js"></script> <div ng-app> <div ng-init="counter = 0"></div> <button ng-click="counter = counter + 1">Increment</button> <button ng-click="counter = counter - 1">Decrement</button> {{counter}} </div>Try!
In-memory счетчик с помощью контроллера
С целью подготовки к более сложным действиям в третьем примере мы перенесли код, уменьшающий счетчик, в контроллер. (Кнопка, увеличивающая счетчик, осталась без изменений.)
В этот раз мы создали модуль и контроллер Angular, в котором установили значение по умолчанию для переменной $scope.counter в 0 и определили метод decrement. Так как это уже чистый JavaScript, то мы можем делать автоинкремент и автодекремент с помощью выражения: counter--.
В HTML мы установили атрибут ng-click="decrement()", который обозначает, что метод decrement будет вызыван каждый раз, когда будет нажата кнопка.
examples/angular/in_memory_counter_with_controller.html
<script src="angular.min.js"></script> <script> angular.module("CounterApp", []) .controller("CounterController", function($scope) { $scope.counter = 0; $scope.decrement = function() { $scope.counter--; }; }) </script> <div ng-app="CounterApp"> <div ng-controller="CounterController"> <button ng-click="counter = counter + 1">Increment</button> <button ng-click="decrement()">Decrement</button> {{counter}} </div> </div>Try!

Published on 2015-10-25