Давайте рассмотрим пример, который показывает немного больше Angular.
Представим, что мы собираемся создать торговое приложение. Где-то в приложении мы должны будем показать
корзину пользователя и дать ему возможность редактировать ее. Давайте сразу перейдем к этой части.
После загрузки html, окно браузера будет выглядеть как скриншоте:
Далее коротко рассмотрим как это работает. Начнем с самого начала.
Скобки {{}} в span устанавливает одностороннюю зависимость, которая говорит "вставить значение здесь". Но приложению также необходимо знать когда пользователь меняет quantity потому, что это меняет общую цену.
Мы будем синхронно отслеживать изменения в модели и в поле ввода используя директиву ng-model. Эта директива вставляет значение item.quantity в поле ввода, и также автоматически обновляет item.quantity когда пользователь вводит новое значение.
<html ng-app>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script src="angular.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
После загрузки html, окно браузера будет выглядеть как скриншоте:
Далее коротко рассмотрим как это работает. Начнем с самого начала.
<html ng-app>Атрибут ng-app указывает Angular, какой частью шаблона он должен управлять. Так как мы поместили его в элемент html мы указали Angular, что хотим управлять всей страницей. Кроме такого размещения атрибута ng-app, его можно поместить на элемент div, если вы интегрировали Angular в существующее приложение, которое использует другие методы управления страницей.
<body ng-controller='CartController'>В Angular вы управляете областью страницы через JavaScript классы, которые называются контроллеры. Включая контроллер в тег body мы объявляем, что CartController будет управлять всем, что содержится между тегами body.
<div ng-repeat='item in items'>ng-repeat говорит скопировать DOM внутри div один раз для каждого элемента в массиве items. Также для каждой копии div он будет устанавливать свойство с именем item, которое содержит текущий элемент массива, чтобы мы могли использовать его в шаблоне. Как мы видим это приводит к трем div каждый из которых содержит название продукта, количество, цену за единицу, общую стоимость и кнопку для удаления элемента.
<span>{{item.title}}</span>
Как мы видели в примере "Hello, World", связывание данных через {{}} позволяет нам вставить значение переменной в определенное место страницы и осуществлять синхронизацию. Выражение {{item.title}} возвращает текущий item в итерации и вставляет значение свойства title в DOM.
<input ng-model='item.quantity'>Определение ng-model создает привязку данных между полем ввода и переменной item.quantity.
Скобки {{}} в span устанавливает одностороннюю зависимость, которая говорит "вставить значение здесь". Но приложению также необходимо знать когда пользователь меняет quantity потому, что это меняет общую цену.
Мы будем синхронно отслеживать изменения в модели и в поле ввода используя директиву ng-model. Эта директива вставляет значение item.quantity в поле ввода, и также автоматически обновляет item.quantity когда пользователь вводит новое значение.
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
Мы хотим, чтобы цена за единицу товара и общая стоимость форматировалась в долларах. Angular включает в себя фильтры, которые позволяют трансформировать текст. В нашем примере фильтр currency форматирует текст в виде доллара.
<button ng-click='remove($index)'>Remove</button>Это выражение позволяет пользователям удалять записи нажимая на кнопку Remove. При нажатии на кнопку Remove, вызывается функция remove() в которую передается $index, содержащий номер итерации в ng-repeat, что позволяет нам знать какой элемент удалить.
function CartController($scope) {
CartController управляет логикой shopping cart. Мы сообщаем Angular, что контроллеру требуется scope, поместив его объявлении конструктора. $scope позволяет нам привязывать данные к элементам UI.
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
Определение $scope.items создает фиктивные данные для представления коллекции элементов в shopping cart. Мы хотим сделать их доступными для связывания данных с UI, поэтому мы добавили их в $scope. Конечно, реальная версия контроллера может работать не только с данными в памяти, но и должным образом обращаться к данным на сервере.
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
Мы хотим, чтобы функция remove() была доступна для вызова из UI, поэтому мы тоже добавляем ее в $scope. Эта функция просто удаляет элементы из массива. Поскольку список div создан при помощи ng-repeat, этот список автоматически сжимается когда элементы удаляются.
Комментариев нет :
Отправить комментарий