Простой 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>

view

В этом примере у нас есть 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>

view

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>

view