Создание базового приложения Angular за 10 минут - часть 1

В настоящее время существует множество фреймворков и библиотек для каждого языка программирования. Некоторые фреймворки сложнее других. Что касается языка JavaScript, то есть 3 самых популярных фреймворка, и один из них - хорошо известный Angular. Он подходит для создания масштабируемых мобильных и веб-приложений больших и средних размеров.

Иногда этот фреймворк считается сложным, потому что он использует Typescript, а не Javascript. Здесь вы найдете всю документацию об этом,

Давайте создадим простое приложение на Angular, которое будет информировать пользователей о прогнозе погоды.

1. Подготовка окружающей среды

Установите Node.js. Вы можете скачать его с официального сайта. Вы получаете это с помощью диспетчера пакетов узлов, который тоже необходимо установить. Вам необходимо загрузить зависимости проекта. После этого выполните следующие команды:

узел -v
npm -v

Если установка прошла успешно, вы получите версии соответствующих пакетов.

Затем установите глобальную поддержку языка TypeScript, выполнив эту команду в своем терминале:

npm install -g typescript

Флаг -g (сокращенная форма от - global) указывает, что этот пакет будет установлен в системе глобально (здесь вы найдете дополнительную информацию об использовании NPM.

Кроме того, вам необходимо установить Angular CLI глобально.

npm install -g @ angular / cli

После этой установки приступим к созданию приложения Angular. Во-первых, вы должны выполнить следующую команду в CLI внутри каталога с вашими проектами:

ng новое погодное приложение - стиль scss

Примечание. Без флагового стиля [scss, stylus, less] препроцессоры CSS не будут использоваться по умолчанию для проекта.

Эта команда генерирует новое приложение Angular с указанным именем и использует SASS в качестве препроцессора CSS по умолчанию (в официальной документации (https://cli.angular.io) вы можете найти подробную информацию о командах Angular CLI).

Прочтите вторую часть о разработке приложения для прогноза погоды здесь.

Теперь будет создан новый каталог проекта с базовым шаблоном приложения внутри. Чтобы запустить приложение, перейдите в его каталог:

cd погода-приложение

и запускаем сервер разработки:

нг подавать

Теперь, посетив http: // localhost: 4200 /, вы увидите вид этого приложения Angular.

2. Разработка погодного компонента

Внутри папки проекта ./src/app находится корневой компонент приложения - app.component. На данный момент он единственный в проекте. Было бы предпочтительнее вынести компонент-оболочку за пределы app.component. В этом приложении компонентом оболочки будет weather.component. Давайте создадим его с помощью следующей команды Angular CLI:

ng генерировать компонент погоды

В результате в папке ./src/app создается каталог нового компонента «погода» со следующими файлами:

  • weather.component.scss - стили компонентов;
  • weather.component.html - шаблон представления компонента;
  • weather.component.spec.ts - модульные тесты компонентов;
  • weather.component.ts - сам файл компонента.

Давайте сосредоточимся на декораторе компонентов, где указаны метаданные нашего компонента:

Селектор - это идентификатор использования компонента в шаблонах других компонентов, templateUrl и styleUrl - это ссылки на файл шаблона и стили компонентов. Действительно, после создания компонента Angular CLI объявляет его в модуле приложения, что позволяет сразу же использовать его в других компонентах, объявленных в этом модуле.

app.module.ts

Короче говоря, погодный компонент можно применить внутри корневого компонента - компонента приложения. Итак, приступим: добавим компонент погоды в компонент приложения в качестве его дочернего элемента. app.component.html должен выглядеть так:

После сохранения изменений сервер разработки обновит страницу в браузере, и вы увидите вид компонента погоды (пока только слова «погода работает!»).

Поговорим о данных, которые должны обрабатываться в нашем приложении.

Приложение должно содержать большой список городов, и пользователи могут найти прогноз погоды для каждого города. В прогноз будут включены следующие показатели:

  • погодные условия;
  • ветер (скорость и направление);
  • температура (днем и ночью).

Используя эти детали, давайте опишем новый тип данных (я называю его прогнозом). Пришло время использовать для этого специальную функцию TypeScript - интерфейсы (https://www.typescriptlang.org/docs/handbook/interfaces.html). Для нового интерфейса вы должны запустить в терминале следующую команду:

ng генерировать ядро ​​интерфейса / интерфейсы / прогноз

С помощью этой команды мы создали каталог ./src/app/core/interfaces и поместили внутрь файл интерфейса «прогноз.ts». Теперь в нем будет описываться наш тип данных «Прогноз»:

Примечание: ключевое слово «экспорт» позволяет позже импортировать объявленный интерфейс для использования в компонентах.

Интерфейс формально является объектом, который объявляет типы данных своих ключей вместо значений. Итак, мы описали структуру данных самого прогноза погоды.

На этом мы бы закончили описание наших данных, если бы сделали прогноз для одного города. Но мы имеем дело со списком городов, поэтому мы должны описать тип данных элемента этого списка. Для этого создайте еще один интерфейс (назовем его City):

ng генерировать ядро ​​интерфейса / интерфейсы / город

Элемент списка городов будет включать название города и прогноз для каждого города.

Примечание. Здесь можно использовать интерфейс прогноза, поскольку он был ранее отмечен ключевым словом «экспорт».

Теперь, после описания всех типов данных, мы можем приступить к созданию шаблона компонента.

Разметка нашей страницы будет иметь следующую схему:

Для этого создайте разметку HTML и добавьте к ней стили:

weather.component.html

weather.component.scss

Кроме того, нам нужно добавить несколько общих стилей, чтобы восстановить свойства браузера по умолчанию. Для этих целей в приложении Angular есть файл src / styles.scss. В отличие от стилей, написанных непосредственно в компоненте, стили, описанные в этом файле, влияют на весь проект.

styles.scss

Далее в приложении должны отображаться данные в формате списка городов с их прогнозами. В Angular источниками данных являются специальные инструменты, называемые службами. Используя следующую команду, мы создадим новую службу в каталоге ./src/app/core/services/, и она вернет нам список городов. Назовем это городом:

ng сгенерировать сервисное ядро ​​/ услуги / город

Затем добавьте к этому сервису метод getCities, который будет возвращать этот список городов с прогнозами в виде массива.

В реальных приложениях Angular службы обычно получают данные от некоторого API, взаимодействуя через HTTP-запросы. Работа с HTTPS-запросами не рассматривается в этой статье и будет обсуждаться позже. А теперь давайте просто создадим файл «./src/app/mocks/cities.mock.ts» с тестовыми данными, которые будут импортированы в наш сервис.

city.mock.ts

Теперь наш сервис будет изменен так, чтобы метод getCities возвращал тестовые данные из созданного файла:

В сервисе доступен массив городов с их прогнозом погоды. Но возникает вопрос: как получить доступ к служебным методам из компонента? Для этого Angular предоставляет специальный механизм, позволяющий любому компоненту получать данные из источника - внедрение зависимостей (DI). С помощью этого механизма может быть создана связь между переменной компонента и классом обслуживания. Чтобы реализовать этот подход, давайте изменим наш компонент следующим образом:

weather.component.ts

Теперь данные доступны в компоненте. Давайте перенесем данные в шаблон. У Angular есть чем нам помочь. Он предоставляет директивы для управления отображением и поведением элементов шаблона. В этом случае нам будет полезна директива «* NgFor», которая позволяет отображать элементы итерируемого объекта в цикле, представляя их как элементы DOM.

Вот массив городов в виде HTML-списка:

weather.component.html

и добавьте несколько стилей в конец weather.component.scss, чтобы украсить наш список:

Примечание. Этот метод вывода переменной класса компонента в его шаблоне представляет собой «строковую интерполяцию». Синтаксис предполагает размещение кода TypeScript внутри {{}}, что мы и сделали, поместив туда переменную, содержащую строку.

После использования указанной разметки и стилей наше приложение будет выглядеть так:

Хорошо, теперь наше приложение отображает список городов, но прогноз погоды скрыт. Итак, покажем прогноз для выбранного города. Для этого нам сначала нужно создать обработчик выбора города. Пользователь выберет город, щелкнув по нему. Итак, давайте добавим функцию выбора города в наш weather.component.ts:

С помощью приведенного выше фрагмента кода мы создали метод обработки выбора города, который принимает его индекс в списке городов в качестве параметра и присваивает его переменной selectedCity. Этот метод ничего не возвращает при вызове, на что указывает тип «void» возвращаемого значения.

Далее мы должны каким-то образом связать нажатие на название города (если дословно - с элементом списка HTML) с методом класса компонента. Для этого Angular предоставляет функцию привязки события шаблона компонента к его методу класса.

Поэтому измените шаблон компонента следующим образом:

weather.component.html

Примечание. Не забудьте удалить комментарии из тега ‹li›.

Давайте проверим, работает ли наш метод при нажатии на элемент списка. Для этого добавьте в метод строку кода, которая будет выводить параметр (индекс), который метод получает, в консоль браузера.

Если все было сделано правильно, то после нажатия на один из городов в консоли браузера появляется его индекс в массиве городов. Вывод в консоль - это распространенный способ тестирования кода на различных этапах его выполнения. Итак, мы вывели список городов и создали функционал для сохранения индекса активного города при нажатии на него.

3. Создание компонента погодных данных.

Пришло время создать компонент для отображения прогноза погоды для выбранного города. Как и раньше, новый компонент будет создан с помощью команды Angular CLI:

ng генерировать компонент погоды / погодные данные

В каталоге погодного компонента был создан каталог компонента Weather-details с необходимыми файлами. Эта структура предупреждает об иерархии компонентов - компонент погодных данных является дочерним по отношению к компоненту погоды. Теперь добавьте компонент погоды в компонент погоды таким же образом, как компонент погоды был добавлен в компонент приложения выше. Для этого в шаблоне компонента погоды замените «‹! - Скоро будет прогноз… → »комментарий следующей строкой:

Мы добавили один экземпляр компонента погодных данных, но мы не можем его увидеть, пока не выберем какой-нибудь город. Чтобы скрыть и отобразить элементы DOM, Angular предоставляет структурную директиву «* ngIf», которая, в зависимости от истинности переданного ему условия, отображает или удаляет соответствующий элемент HTML. Поскольку ранее мы реализовали функцию сохранения индекса для выбранного города, теперь мы можем его проверить, и если это число ›-1 (индексы городов начинаются с 0), мы можем отобразить компонент« Погода-подробности ».

Итак, давайте изменим шаблон компонента погоды так, чтобы класс «видимый» был назначен компоненту сведений о погоде, при условии, что данный город выбран.

После компиляции кода наше приложение будет выглядеть следующим образом:

Перед разработкой шаблона компонента сведений о погоде мы должны рассмотреть возможность передачи данных между компонентами, поскольку наша следующая задача - передать прогноз для каждого города его компоненту сведений о погоде.

В Angular данные между родительским и дочерним компонентами передаются по следующим правилам:

  • от родителя к потомку - с помощью привязки свойств;
  • от дочернего к родительскому - с использованием привязки событий.

В контексте нашего приложения будет использоваться только привязка свойств, так как в нашем случае компонент weather-details не включает передачу каких-либо данных в родительский компонент погоды.

Метод привязки свойств включает привязку настраиваемого свойства дочернего компонента с данными, которые предполагается передать ему. С другой стороны, настраиваемое свойство должно быть объявлено в классе дочернего компонента с помощью декоратора @Input ().

В контексте нашего приложения это было бы следующим образом:

weather.component.html

weather-details.component.ts

Переменная прогноз компонента Погода-подробности теперь содержит объект с прогнозом погоды для выбранного города. Если мы хотим, чтобы наше приложение выглядело более привлекательно, мы должны связать шрифт иконок с иконками погоды. Например, мы будем использовать иконки погоды (https://erikflowers.github.io/weather-icons/), доступные в виде пакета npm.

Прочтите вторую часть о разработке приложения для прогноза погоды здесь.

Чтобы использовать их, установите пакет npm с помощью команды:

npm install - сохранить значки погоды-npm

Затем мы хотим включить шрифт в общие стили нашего проекта с помощью импорта CSS. Для этого вам необходимо вставить следующую строку в начало styles.scss:

Чтобы украсить отображение прогноза погоды, нам нужно отредактировать шаблон и стили компонента «Weather-details».

weather-details.component.html

weather-details.component.scss

В итоге наше приложение будет выглядеть следующим образом:

Заключение

Итак, после проделанных действий мы получили простое демонстрационное приложение Angular, демонстрирующее основы работы с Angular CLI, TypeScript и компонентами Angular. Мы продемонстрировали способы взаимодействия между классом компонента и его шаблоном, между родительским и дочерним компонентами, а также между компонентом и сервисом Angular. Выучить Angular не так уж и сложно.

Но наше приложение еще не готово, потому что список городов и прогноз погоды должны находиться внутри разных блоков страницы.

Прочтите вторую часть о разработке приложения для прогноза погоды здесь.