Від автора: прив’язка даних – це концепція Angular, з допомогою якої розробники можуть змінювати статичний контент веб-додатки, роблячи додаток більш активним і привабливим. Перш ніж говорити про те, як ця концепція була реалізована в Angular, я поясню на прикладі. В серії уроків основи Angular 4 в якості прикладу я буду використовувати простий інтернет-магазин. Щоб купити щось в магазині, спочатку необхідно клікнути на кнопку Shop Now на сторінці Home. Після цього користувач буде перенаправлено на список елементів, які ми і будемо продавати в нашому магазині.
Для реалізації цього функціоналу спочатку необхідно визначити дію для кнопки shop now. Далі користувача необхідно направити на сторінку shop і відобразити набір елементів для продажу. Ці елементи, зазвичай, не статичні. Швидше за все, ці елементи ми будемо витягати з бази даних і відображати на сторінці shop динамічно. Такого роду динамічно події з залученням уваги користувача можна виконувати за допомогою прив’язки даних в Angular.
У Angular прив’язку даних можна розділити на 4 категорії – рядкова інтерполяція, прив’язка властивостей, прив’язка подій і двостороння прив’язка. Ці чотири типи дозволяють спілкуватися бізнес-логіки (код Script Type) з поданням (HTML код), як показано на діаграмі нижче.
Візьмемо попередній приклад з відображенням списку елементів на сторінці shop. Уявіть, що вам необхідно відображати поіменно кожен елемент на сторінці у вигляді списку.
Для цього спочатку необхідно витягнути елементи з бази даних в коді Type Script. Далі нам якимось чином необхідно надіслати ці дані в HTML-код, щоб показати їх користувачеві. Це один із способів взаємодії коду Script Type з HTML-кодом. У Angular є 2 способи такої взаємодії.
Інтерполяція рядків
За допомогою цього методу ми можемо вмонтувати елементи script type в HTML код. Нижче представлений код з нашої програми.
export class ItemComponent {
ім’я елемента: “Item1”;
…
Це код з нашого компонента елемента. Як бачите, у нього є властивість ім’я елемента зі значенням за замовчуванням item1. В наступних статтях обговоримо спосіб отримання списку елементів з бази даних. Зараз же давайте припустимо, що у нас є лише один елемент в магазині. У цієї змінної нам необхідно зберігати ім’я елемента.
{{ім’я елемента}}
Код вище взяти з HTML-файлу шаблону. Ми просто відображаємо ім’я елемента всередині тега h4. Як бачите, ми помістили ім’я Script Type властивості «{{}}». Ці дужки називаються строкової інтерполяцією в Angular всередині HTML коду. Ми можемо напряму звертатися до елементів Script Type коду і відображати значення елементів у поданні, як у нашому прикладі. Запам’ятайте, всередині подвійних фігурних дужок ми можемо помістити будь-який рядок, яка буде зіставлятися з відповідним елементом typescript. ex: {{ім’я елемента}} , {{‘ім’я елемента’}} також валидно.
Усередині цих дужок можна також виконувати функції typescript, у виставі буде відображатися значення, що повертається. {{getItemName()}} також валидна.
Прив’язка властивостей
Ще один спосіб комунікації Script Type коду HTML. В цей раз ми прив’язуємо властивість Type Script до HTML властивості.
export class ItemComponent {
ім’я елемента: “Item1”;
…
Представлений вище код з файлу ItemComponent Type Script. Припустимо, що у нас всього один елемент в магазині. Нам необхідно відобразити ім’я елемента властивості ім’я елемента.
Замість строкової інтерполяції можна написати HTML код. Тут [innerText] – спосіб прив’язки HTML властивості Angular. Квадратні дужки [] говорять про те, що ми будемо використовувати прив’язку властивостей. Усередині дужок необхідно вказати властивість елемента HTML для використання. У цьому прикладі ми будемо використовувати властивість innerText тега h4. Існує маса HTML властивостей, які можна використовувати для прив’язки. З допомогою innerText можна змінювати текст тега h4. Якщо цій властивості присвоїти який-небудь текст:
innerText=”some text”
Цей текст буде показаний в поданні. У нашому прикладі саме це і відбувається, але замість тексту ми будемо показувати динамічний контент з файлу Script Type. Прив’язати можна як змінну, так і функцію Type Script.
[innerText]=”ім’я елемента” [innerText]=”getItemName()” також валідні.
Прив’язка подій
Досі ми розглядали способи комунікації Script Type файлів і HTML файлів в одному напрямку. Нижче ми подивимося, як зробити зворотну операцію. Ми пошлемо дані з HTML файлу Script Type файл. У попередньому прикладі ми говорили, що нам необхідно перенаправити користувача зі сторінки home на shop по кліку на кнопку shop now. Це можна зробити з допомогою прив’язки подій. Необхідно лише прописати логіку редиректа в файл Script Type, після чого прив’язати цю логіку до події onClick кнопки shop now.
export class HomeComponent {
onClickShopNow() {
// Redirecting logic goes here
}
…
Код HomeComponent. Ми створили нову функцію onClickShopNow, в яку помістимо логіку редиректа (логіку редіректу обговоримо в наступних уроках). Зараз нам потрібно прив’язати цю функцію до кнопки shop now у файлі HTML HomeComponent.
(click) = “onShopNow()”
Також є важливий аргумент, який можна передавати у функцію script type — $event. Передавати цей аргумент у функцію можна наступним чином.
(click) = “onShopNow($event)”
Script Type функцію необхідно змінити, щоб вона приймала цей параметр.
export class HomeComponent {
onShopNow(event) {
// Redirecting logic goes here
}
…
В HTML файлі $event – зарезервоване ключове слово. Воно посилає всю інформацію про події у файл script type, щоб усередині функції ми могли з нею працювати. Про змінної event і способи її використання поговоримо пізніше.
Двостороння прив’язка
Досі ми обговорили один спосіб взаємозв’язку між файлом Script Type і HTML-файлом, і цього вистачало нашого додатком. В магазині типу нашого інформацію необхідно постійно оновлювати. Наприклад, повинен бути спосіб оновлювати ціну елемента.
Для спрощення припустимо, що є вимога відображати сторінку update item для адміністраторів програми, де вони можуть переглядати старі значення властивостей елементів (імена, описи, ціни, URL зображень) і оновлювати властивості новими значеннями. Інтерфейс може бути наступним.
У всіх чотирьох властивостей є редаговане поле за замовчуванням у ньому відображається поточне значення. Користувач може змінити це значення і клікнути на update для оновлення значень в базі даних. Для цього нам необхідно посилати поточні значення цих властивостей з нашого файлу Script Type файл HTML і відображати їх за замовчуванням в текстових полях. Після оновлення значень і кліка по кнопці update нам необхідно якимось чином посилати значення з HTML файлу в файл Type Script. Вище ми вже говорили, що це можна зробити з допомогою строкової інтерполяції/прив’язки властивостей або прив’язки подій. Однак у Angular є елегантний спосіб – двостороння прив’язка. Нам лише потрібно задати властивість, яку необхідно прив’язати до файлу Script Type, після чого прив’язати його з HTML файлу.
export class ItemComponent {
ім’я елемента: “Item1”;
…
У коді вище показано, що ім’я елемента ми зберігаємо властивості ім’я елемента. Нам потрібно лише прив’язати це властивість з HTML файлу:
[()] говорить Angular, що ми будемо використовувати двосторонню прив’язку. Для прив’язки властивостей ми використовували синтаксис [], а для прив’язки подій (). Тут же ми об’єднуємо обидві функції, і нам необхідно використовувати спеціальну директиву ngModel. Директиви обговоримо потім, а зараз просто запам’ятайте, що нам необхідно її використовувати. Далі необхідно вказати властивість, яку необхідно прив’язати у файлі Script Type
[(ngModel)] = “ім’я елемента”
Якщо двостороння прив’язка використовується в додатку перший раз, не забудьте імпортувати FormsModule з модуля програми.
@NgModule({
declarations: […
],
imports: [
FormsModule
],
…
})
export class AppModule { }
Якщо ми правильно все налаштовано для всіх наших властивостей елемента в додатку, то при переході на сторінку Update Item поля вводу будуть відображати поточні значення. Як тільки користувач введе щось в ці поля, значення відповідних змінних будуть оновлені у файлі Type Script. За допомогою цього методу можна реалізувати і інші функції типу круті валідації у реальному часі для текстових полів. Коли користувач буде вводити невалидное значення в текстове поле (наприклад, «ABCD» для властивості ціни), ми будемо відображати повідомлення про помилку без запуску додаткових подій у HTML-файлі.
Висновок
Думаю, вам буде корисно дізнатися про прив’язку даних в Angular. Я буду писати статті та з інших важливих функцій Angular 4. Добре всім покодить!!!
