От автора: привязка данных – это концепция Angular, с помощью которой разработчики могут менять статичный контент веб-приложения, делая приложение более активным и привлекательным. Прежде чем говорить о том, как эта концепция была реализована в Angular, я поясню ее на примере. В серии уроков основы Angular 4 в качестве примера я буду использовать простой интернет-магазин. Чтобы купить что-то в магазине, сначала необходимо кликнуть на кнопку Shop Now на странице Home. После этого пользователь будет перенаправлен на список элементов, которые мы и будем продавать в нашем магазине.
Для реализации этого функционала сначала необходимо определить действие для кнопки shop now. Далее пользователя необходимо направить на страницу shop и отобразить набор элементов для продажи. Эти элементы, обычно, не статичны. Скорее всего, эти элементы мы будем вытягивать из базы данных и отображать на странице shop динамически. Такого рода динамически события с привлечением внимания пользователя можно выполнять с помощью привязки данных в Angular.
В Angular привязку данных можно разделить на 4 категории – строчная интерполяция, привязка свойств, привязка событий и двусторонняя привязка. Эти четыре типа позволяют общаться бизнес-логике (код Type Script) с представлением (HTML код), как показано на диаграмме ниже.
Возьмем предыдущий пример с отображением списка элементов на странице shop. Представьте, что вам необходимо отображать поименно каждый элемент на странице в виде списка.
Для этого сначала необходимо вытянуть элементы из базы данных в коде Type Script. Далее нам каким-то образом необходимо послать эти данные в HTML код, чтобы отобразить их пользователю. Это один из способов взаимодействия кода Type Script с HTML кодом. В Angular есть 2 способа такого взаимодействия.
Интерполяция строк
С помощью этого метода мы можем встроить элементы type script в HTML код. Ниже представлен код из нашего приложения.
|
1 2 3 |
export class ItemComponent { itemName: "Item1"; ... |
Это код из нашего компонента элемента. Как видите, у него есть свойство itemName со значением по умолчанию item1. В следующих статьях обсудим способ получения списка элементов из базы данных. Сейчас же давайте предположим, что у нас есть всего один элемент в магазине. В этой переменной нам необходимо хранить имя элемента.
|
1 |
<h4>{{itemName}}</h4> |
Код выше взять из файла HTML шаблона. Мы просто отображаем имя элемента внутри тега h4. Как видите, мы поместили имя Type Script свойства в «{{}}». Эти скобки называются строковой интерполяцией в Angular внутри HTML кода. Мы можем напрямую стучаться к элементам Type Script кода и отображать значение элементов в представлении, как в нашем примере. Запомните, внутри двойных фигурных скобок мы можем поместить любую строку, которая будет сопоставляться с соответствующим элементом typescript. ex: {{itemName}} , {{‘itemName’}} также валидно.
Внутри этих скобок также можно выполнять функции typescript, в представлении будет отображаться возвращаемое значение. {{getItemName()}} также валидна.
Привязка свойств
Еще один способ коммуникации Type Script кода с HTML кодом. В этот раз мы привязываем свойство Type Script к HTML свойству.
|
1 2 3 |
export class ItemComponent { itemName: "Item1"; ... |
Выше представлен код из файла ItemComponent Type Script. Предположим, что у нас всего один элемент в магазине. Нам необходимо отобразить имя элемента в свойстве itemName.
|
1 |
<h4 [innerText]="itemName" ></h4> |
Вместо строковой интерполяции можно написать HTML код. Здесь [innerText] – способ привязки HTML свойства в Angular. Квадратные скобки [] говорят о том, что мы будем использовать привязку свойств. Внутри скобок необходимо указать свойство HTML элемента для использования. В этом примере мы будем использовать свойство innerText тега h4. Существует масса HTML свойств, которые можно использовать для привязки. С помощью innerText можно менять текст тега h4. Если этому свойству присвоить какой-либо текст:
|
1 |
innerText="some text" |
Этот текст будет показан в представлении. В нашем примере ровно это и происходит, но вместо текста мы будем показывать динамический контент из файла Type Script. Привязать можно как переменную, так и функцию Type Script.
[innerText]=”itemName” и [innerText]=”getItemName()” также валидны.
Привязка событий
До сих пор мы рассматривали способы коммуникации Type Script файлов и HTML файлов в одном направлении. Ниже мы посмотрим, как сделать обратную операцию. Мы пошлем данные из HTML файла в Type Script файл. В предыдущем примере мы говорили, что нам необходимо перенаправить пользователя со страницы home на shop по клику на кнопку shop now. Это можно сделать с помощью привязки событий. Необходимо всего лишь прописать логику редиректа в файл Type Script, после чего привязать эту логику к событию onClick кнопки shop now.
|
1 2 3 4 5 |
export class HomeComponent { onClickShopNow() { // Redirecting logic goes here } ... |
Код из HomeComponent. Мы создали новую функцию onClickShopNow, в которую поместим логику редиректа (логику редиректа обсудим в следующих уроках). Сейчас же нам нужно привязать эту функцию к кнопке shop now в файле HTML HomeComponent.
|
1 |
<button (click) = "onShopNow()" |
Делается это просто, как показано в коде выше. Здесь круглые скобки () указывают Angular, что мы будем использовать привязку событий. Внутри скобок указывается события привязки. В HTML есть встроенные события типа onClick, onLoad и т.д., однако здесь события необходимо писать без префикса on. Назначить событие соответствующей функции Type Script можно следующим образом.
|
1 |
(click) = "onShopNow()" |
Также есть важный аргумент, который можно передавать в функцию type script — $event. Передавать этот аргумент в функцию можно следующим образом.
|
1 |
(click) = "onShopNow($event)" |
Type Script функцию необходимо изменить, чтобы она принимала этот параметр.
|
1 2 3 4 5 |
export class HomeComponent { onShopNow(event) { // Redirecting logic goes here } ... |
В HTML файле $event – зарезервированное ключевое слово. Оно посылает всю информацию о событиях в файл type script, чтобы внутри функции мы могли с ней работать. О переменной event и способах ее использования поговорим позже.
Двусторонняя привязка
До сих пор мы обсудили один способ взаимосвязи между файлом Type Script и HTML файлом, и этого хватало нашему приложению. В магазине типа нашего информацию необходимо обновлять постоянно. Например, должен быть способ обновлять цену элемента.
Для упрощения предположим, что есть требование отображать страницу update item для администраторов приложения, где они могут просматривать старые значения свойств элементов (имена, описания, цены, URL изображений) и обновлять свойства новыми значениями. Интерфейс может быть следующим.
У всех четырех свойств есть редактируемое текстовое поле, и по умолчанию в нем отображается текущее значение. Пользователь может изменить это значение и кликнуть на update для обновления значений в базе данных. Для этого нам необходимо посылать текущие значения этих свойств из нашего файла Type Script в файл HTML и отображать их по умолчанию в текстовых полях. После обновления значений и клика по кнопке update нам необходимо каким-то образом посылать значения из HTML файла в файл Type Script. Выше мы уже говорили, что это можно сделать с помощью строковой интерполяции/привязки свойств или привязки событий. Однако в Angular есть элегантный способ – двусторонняя привязка. Нам лишь нужно задать свойство, которое необходимо привязать в файл Type Script, после чего привязать его из HTML файла.
|
1 2 3 |
export class ItemComponent { itemName: "Item1"; ... |
В коде выше показано, что имя элемента мы храним в свойстве itemName. Нам нужно лишь привязать это свойство из HTML файла:
|
1 |
<input type="text" [(ngModel)] = "itemName" |
[()] говорит Angular, что мы будем использовать двустороннюю привязку. Для привязки свойств мы использовали синтаксис [], а для привязки событий (). Здесь же мы объединяем обе функции, и нам необходимо использовать специальную директиву ngModel. Директивы обсудим потом, а сейчас просто запомните, что нам необходимо ее использовать. Далее необходимо указать свойство, которое необходимо привязать в файле Type Script
|
1 |
[(ngModel)] = "itemName" |
Если двусторонняя привязка используется в приложении первый раз, не забудьте импортировать FormsModule из модуля приложения.
|
1 2 3 4 5 6 7 8 9 |
@NgModule({ declarations: [... ], imports: [ FormsModule ], ... }) export class AppModule { } |
Если мы правильно все настроили для всех наших свойств элемента в приложении, то при переходе на страницу Update Item поля ввода будут отображать текущие значения. Как только пользователь введет что-то в эти поля, значения соответствующих переменных будут обновлены в файле Type Script. С помощью этого метода можно реализовать и другие крутые функции типа валидации в реальном времени для текстовых полей. Когда пользователь будет вводить невалидное значение в текстовое поле (например, «ABCD» для свойства цены), мы будем отображать сообщение об ошибке без запуска дополнительных событий в файле HTML.
Заключение
Думаю, вам было полезно узнать о привязке данных в Angular. Я буду писать статьи и по другим важным функциям Angular 4. Хорошо всем покодить!!!
Автор: Nilupul Liyanage
Источник: //medium.com/
Редакция: Команда webformyself.
