Основы Angular 4: привязка данных
От автора: привязка данных – это концепция Angular, с помощью которой разработчики могут менять статичный контент веб-приложения, делая приложение более активным и привлекательным. Прежде чем говорить о том, как эта концепция была реализована в Angular, я поясню ее на примере. В серии уроков основы Angular 4 в качестве примера я буду использовать простой интернет-магазин. Чтобы купить что-то в магазине, сначала необходимо кликнуть на кнопку Shop Now на странице Home. После этого пользователь будет перенаправлен на список элементов, которые мы и будем продавать в нашем магазине.
Для реализации этого функционала сначала необходимо определить действие для кнопки shop now. Далее пользователя необходимо направить на страницу shop и отобразить набор элементов для продажи. Эти элементы, обычно, не статичны. Скорее всего, эти элементы мы будем вытягивать из базы данных и отображать на странице shop динамически. Такого рода динамически события с привлечением внимания пользователя можно выполнять с помощью привязки данных в Angular.
В Angular привязку данных можно разделить на 4 категории – строчная интерполяция, привязка свойств, привязка событий и двусторонняя привязка. Эти четыре типа позволяют общаться бизнес-логике (код Type Script) с представлением (HTML код), как показано на диаграмме ниже.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Возьмем предыдущий пример с отображением списка элементов на странице shop. Представьте, что вам необходимо отображать поименно каждый элемент на странице в виде списка.
Для этого сначала необходимо вытянуть элементы из базы данных в коде Type Script. Далее нам каким-то образом необходимо послать эти данные в HTML код, чтобы отобразить их пользователю. Это один из способов взаимодействия кода Type Script с HTML кодом. В Angular есть 2 способа такого взаимодействия.
Интерполяция строкС помощью этого метода мы можем встроить элементы type script в HTML код. Ниже представлен код из нашего приложения.
Это код из нашего компонента элемента. Как видите, у него есть свойство itemName со значением по умолчанию item1. В следующих статьях обсудим способ получения списка элементов из базы данных. Сейчас же давайте предположим, что у нас есть всего один элемент в магазине. В этой переменной нам необходимо хранить имя элемента.
Код выше взять из файла HTML шаблона. Мы просто отображаем имя элемента внутри тега h4. Как видите, мы поместили имя Type Script свойства в «». Эти скобки называются строковой интерполяцией в Angular внутри HTML кода. Мы можем напрямую стучаться к элементам Type Script кода и отображать значение элементов в представлении, как в нашем примере. Запомните, внутри двойных фигурных скобок мы можем поместить любую строку, которая будет сопоставляться с соответствующим элементом typescript. ex: , также валидно.
Внутри этих скобок также можно выполнять функции typescript, в представлении будет отображаться возвращаемое значение. также валидна.
Привязка свойствЕще один способ коммуникации Type Script кода с HTML кодом. В этот раз мы привязываем свойство Type Script к HTML свойству.
Выше представлен код из файла ItemComponent Type Script. Предположим, что у нас всего один элемент в магазине. Нам необходимо отобразить имя элемента в свойстве itemName.
Вместо строковой интерполяции можно написать HTML код. Здесь [innerText] – способ привязки HTML свойства в Angular. Квадратные скобки [] говорят о том, что мы будем использовать привязку свойств. Внутри скобок необходимо указать свойство HTML элемента для использования. В этом примере мы будем использовать свойство innerText тега h4. Существует масса HTML свойств, которые можно использовать для привязки. С помощью innerText можно менять текст тега h4. Если этому свойству присвоить какой-либо текст:
Этот текст будет показан в представлении. В нашем примере ровно это и происходит, но вместо текста мы будем показывать динамический контент из файла Type Script. Привязать можно как переменную, так и функцию Type Script.
[innerText]=”itemName” и [innerText]=”getItemName()” также валидны.
Привязка событийДо сих пор мы рассматривали способы коммуникации Type Script файлов и HTML файлов в одном направлении. Ниже мы посмотрим, как сделать обратную операцию. Мы пошлем данные из HTML файла в Type Script файл. В предыдущем примере мы говорили, что нам необходимо перенаправить пользователя со страницы home на shop по клику на кнопку shop now. Это можно сделать с помощью привязки событий. Необходимо всего лишь прописать логику редиректа в файл Type Script, после чего привязать эту логику к событию onClick кнопки shop now.
Код из HomeComponent. Мы создали новую функцию onClickShopNow, в которую поместим логику редиректа (логику редиректа обсудим в следующих уроках). Сейчас же нам нужно привязать эту функцию к кнопке shop now в файле HTML HomeComponent.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Делается это просто, как показано в коде выше. Здесь круглые скобки () указывают Angular, что мы будем использовать привязку событий. Внутри скобок указывается события привязки. В HTML есть встроенные события типа onClick, onLoad и т.д., однако здесь события необходимо писать без префикса on. Назначить событие соответствующей функции Type Script можно следующим образом.
Также есть важный аргумент, который можно передавать в функцию type script — $event. Передавать этот аргумент в функцию можно следующим образом.
Type Script функцию необходимо изменить, чтобы она принимала этот параметр.
В HTML файле $event – зарезервированное ключевое слово. Оно посылает всю информацию о событиях в файл type script, чтобы внутри функции мы могли с ней работать. О переменной event и способах ее использования поговорим позже.
Двусторонняя привязкаДо сих пор мы обсудили один способ взаимосвязи между файлом Type Script и HTML файлом, и этого хватало нашему приложению. В магазине типа нашего информацию необходимо обновлять постоянно. Например, должен быть способ обновлять цену элемента.
Для упрощения предположим, что есть требование отображать страницу update item для администраторов приложения, где они могут просматривать старые значения свойств элементов (имена, описания, цены, URL изображений) и обновлять свойства новыми значениями. Интерфейс может быть следующим.
У всех четырех свойств есть редактируемое текстовое поле, и по умолчанию в нем отображается текущее значение. Пользователь может изменить это значение и кликнуть на update для обновления значений в базе данных. Для этого нам необходимо посылать текущие значения этих свойств из нашего файла Type Script в файл HTML и отображать их по умолчанию в текстовых полях. После обновления значений и клика по кнопке update нам необходимо каким-то образом посылать значения из HTML файла в файл Type Script. Выше мы уже говорили, что это можно сделать с помощью строковой интерполяции/привязки свойств или привязки событий. Однако в Angular есть элегантный способ – двусторонняя привязка. Нам лишь нужно задать свойство, которое необходимо привязать в файл Type Script, после чего привязать его из HTML файла.