Вам не нужно быть мастером CSS, чтобы создавать красивые диалоговые окна.
В веб-приложении диалоговые окна — это удобные инструменты для взаимодействия с пользователями. При правильном использовании он может привлечь внимание пользователей и сделает вашу веб-страницу аккуратной. Если вы хотите создать диалоговое окно с нуля, вам потребуются некоторые продвинутые знания CSS. Однако при использовании такой среды, как Angular, создание диалоговых окон — очень простая задача даже для тех, кто не является экспертом в CSS. В этом посте мы покажем, как создать простое диалоговое окно с помощью Angular. Все детали, а также некоторые предостережения освещены, что может быть полезно для вашей работы на практике.
Подготовка
Если вы еще не установили Angular CLI, вы можете посмотреть это руководство. В первую очередь вам нужно установить node.js, потому что нам нужно использовать инструмент npm для установки Angular CLI.
$ npm install -g @angular/cli
В качестве альтернативы вы создаете проект в StackBlitz, если не хотите делать это локально.
Создайте рабочее пространство и необходимые компоненты
Приложение angular разрабатывается в контексте рабочей области Angular. Сначала нам нужно создать один:
$ ng new mydialog
Рабочее пространство — это, по сути, папка проекта, содержащая всевозможный шаблонный код. Пока вам не нужно проверять код. Если вы используете StackBlitz, рабочее пространство будет создано для вас по умолчанию, когда вы выберете фреймворк Angular.
Для нас будет создано NgModule (AppModule) по умолчанию, которое включает в себя модули, компоненты, сервисы и т. д. для приложения. Кроме того, создается компонент по умолчанию (AppComponent), который служит точкой входа для приложения.
Нам нужно создать новый компонент, который будет обрабатывать логику диалогового окна:
$ ng generate component add-cart
Внутри папки app для нового компонента (AddCartComponent) будет создана новая папка, которая включает файлы для этого компонента.
Не пугайтесь большого количества файлов, показанных здесь, обычно мы фокусируемся только на файлах в красной рамке, показанной выше.
Установить угловой материал
В этом посте мы сосредоточимся на функциональности и логике данных, а не на стиле. Тем не менее, мы будем использовать Angular Material, чтобы придать нашим кнопкам и формам ввода приятный стиль, который легко применить. И самое главное, мы будем использовать сервис MatDialog для открытия модальных диалогов со стилем и анимацией Material Design.
Чтобы установить Angular Materia в свой проект, выполните следующую команду с помощью Angular CLI:
$ ng add @angular/material
Мы можем оставить выбор по умолчанию в процессе установки. Файлы вашего проекта, такие как package.json, index.html и styles.css, будут автоматически обновлены для применения стиля Angular Material.
В StackBlitz нам нужно добавить зависимость для Angular Material:
Следуя инструкциям, показанным на рисунке выше, добавьте зависимость для Angular Material. Кроме того, нам нужно импортировать тему в styles.css, чтобы Angular Material правильно работал в StackBlitz.
Импорт модулей Angular Material
На предыдущем шаге Angular CLI настроил только глобальные конфигурации Angular Material. Нам нужно вручную импортировать модули, которые будут использоваться в нашем приложении в app.module.ts:
Создайте кнопку, чтобы вызвать диалог
Во-первых, нам нужно создать что-то, что может работать как триггер для открытия диалогового окна. В данном случае кнопка предпочтительнее.
Добавьте следующий код в app.component.html, чтобы создать кнопку. Кроме того, мы также покажем данные корзины после закрытия диалогового окна.
Логика данных включена в файл модели app.compnent.ts:
Код должен быть достаточно понятным, особенно с комментариями. Это может выглядеть просто, но если вы хотите, чтобы он работал правильно и без ошибок, вам нужно быть очень осторожным во всех деталях. Это мой первый фронтенд-пост, который, как мне показалось, написать намного сложнее, чем данные или бэкенд 😅. Тем не менее, этот пост включает в себя некоторые приемы, которые будут полезны для вашей работы, особенно если вы также немного переключаетесь с бэкенда на внешний интерфейс. Он может дополнить официальную документацию некоторым практическим опытом, полученным в ходе практических проектов.
Если вы хотите иметь точный стиль, как показано в этом примере, вам нужно будет написать код CSS, который можно найти в этом репозитории.
Обновите модель диалога и файлы храма
Давайте сначала создадим файл модели, который проще, чем файл шаблона. Добавьте следующий код в add-cart.component.ts:
Здесь стоит упомянуть, что мы можем использовать синтаксис @Inject(MAT_DIALOG_DATA) для ввода некоторых данных в диалоговый компонент. Данные передаются из компонента, в котором открывается диалоговое окно, как показано выше, с конфигурацией data.
И файл шаблона немного сложнее, что требует некоторых базовых знаний Angular и Angular Material, особенно mat-form-field и MatDialog, а также форм, управляемых шаблоном.
Опять же, если вы хотите иметь точный стиль, как показано в этом примере, вам нужно будет написать некоторый код CSS, который можно найти в этом репозитории.
Раскрутить приложение и исправить досадную ошибку
На самом деле мы можем и должны раскручивать приложение в самом начале стадии разработки, чтобы вы видели результат и исправляли ошибки в режиме реального времени.
Мы можем запустить приложение с помощью следующей команды:
$ ng serve --open
Браузер откроется автоматически. Когда вы нажмете кнопку «Добавить в корзину», вы увидите диалоговое окно следующего вида:
Как мы видим, поле ввода и префикс не выровнены должным образом. Это известная ошибка и должна быть явно исправлена. Нам нужно добавить следующий код CSS в таблицу стилей global styles.css:
Затем нам нужно добавить CSS-класс fix-prefix к mat-form-field с префиксом для поля ввода:
Теперь приложение должно выглядеть красиво и правильно, ура!
Настоятельно рекомендуется загрузить репозиторий для этого поста локально или поиграть с существующим в StackBlitz, чтобы лучше понять код. Попробуйте изменить код, сломать его, а затем исправить. Вы узнаете гораздо больше, когда начнете программировать, а не просто читать документацию или видео.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.
