Недавно была выпущена 18 версия популярного фреймворка Angular. Динамичное развитие, а также интерес сообщества, помогли стать Angular одним из лидеров. В цикле статей, я расскажу про последнюю версию на примере приложения по поиску и бронированию авиабилетов.
Что войдет в курс:
- Создание нового приложения с помощью Angular CLI без использования монорепозитория Nx;
- Реализация core (Google Analytics, Yandex Metrika);
- Настройка проекта (линтеры, стайлеры, ssr);
- Создание базовой структуры приложения;
- Реализация UI KIT;
- Использование возможностей фреймворка для создания похожих страниц;
- Интеграция со сторонним API.
Все статьи описывают реализованный мной pet-проект - Buy & fly.
В качестве примера я использовал travel.alfabank.ru.
Может возникнуть вопрос, почему я не взял https://tinkoff.ru/travel. Мне очень больно смотреть на бывший Тинькофф Банк. Все что я в нем любил, начинает стагнировать и увядать.
Что особенного будет в проекте:
-
Signal- будет использованы signal для input и в целом для переменных, что позволяет полностью избавиться от changeDetectionRef. -
@if,@for,@defer,@let- новый синтаксис шаблонов Angular. -
NavigationPaths- одно из решений унификации путей. -
MetricService- общий сервис для отправки аналитики в различные системы. - Максимальное переиспользование всего чего можно.
- Разработка собственного UI KIT.
Что не вошло в цикл статей:
- Оптимизация
SSR; - Настройка полноценного
SEO(отдача 404 статуса для несуществующих страниц); -
NgOptimizedImage. Хоть я и использую директивы изображений, но они достойны отдельного материала для разбора всех тонкостей.
Результатом цикла будет сайт с поиском дешевых авиабилетов.
В мобильной версии:
Демо можно посмотреть тут - buy-and-fly.fafn.ru.
Приложение использует внешнее API - travelpayouts.com.
- Авиасейлс - API для поиска дешевых билетов;
- Hotellook - API для поиска отелей.
Конечно, тут должна быть реклама от Aviasales, но они мне не заплатили 😭, хотя я не просил.
Как использовать туториал:
- Вы можете выполнять все последовательно, и посмотреть все статьи друг за другом.
- Либо же используя github, скачайте и разверните приложение (для корректной работы потребуются ключи от travelpayouts). И по ходу разбора обращаться к нужным частям.
Если у вас будут проблемы с ключами доступа к API, напишите мне, возможно я чем-то смогу помочь, но в целом регистрация на
travelpayouts.comзанимает не больше одной минуты.
В следующей статье рассмотрим создание нового приложения.
Ссылки
Все исходники находятся на github, в репозитории - github.com/Fafnur/buy-and-fly
Демо можно посмотреть здесь - buy-and-fly.fafn.ru/
Top comments (0)