Сайт визитка на Angular. Создание core библиотек.

В данной статье приведем реализацию core библиотек, которые будут использоваться в приложении.

В данный список входят сервисы для получения environments, методы для работы с формами и другие.

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

Под «core» модулями подразумеваются сервисы, директивы, модули и пайпы, без которых не возможна работа приложения.

Основные требования к core библиотекам:

• Все сервисы, которые объявлены в core, имеют provideIn: "root".
• Все модули в core подключаются один раз в app.module, за исключением модулей, которые предоставляют общие pipe, directive и component.

Создадим следующий набор библиотек:

• ApiService — сервис для работы c HTTP;
• EnvironmentService — сервис, который предоставляет доступ к environments;
• FormExtractsModule — модуль, который содержит набор директив и пайпов для упрощения работы FormGroup;
• FormMaskService —фасад на масками с учетом локализации;
• FormUtils — набор утилит, для обработки событий над AngularForms, таких ка toched и пр.;
• HammerModule — модуль, который конфигурирует HammerJS;
• LayoutService — сервис, который построен на BreakpointObserver и возвращает текущий тип платформы для отображения;
• MetaService и MetaStateModule — сервис и модуль для задания мета тегов страницам;
• NavigationService и NavigationPipesModule — сервис и модуль для формализации путей в Angular приложении;
• PlatformService — сервис, который возвращает тип запущенной платформы (browser, server, webworker);
• LocalSyncStorage, LocalAsyncStorage, SessionSyncStorage, SessionAsyncStorage, MemoryStorage — сервисы для работы с веб хранилищами, такими как localStorage и sessionStorage, а также их обертка, для корректной работы SSR;
• RootStoreModule — модуль, который представляет собой главный state, с настройкой для сохранения routerState;
• PageObject и providerOf — утилиты для упрощения тестирования;
• DestroyService — сервис для отписки в компонентах Angular;
• isNotNullOrUndefined — кастомный оператор, для проверки потока на не null или undefind;
• Nullable — кастомный тип, для задания любому типу всех свойств null;
• WindowService — сервис для предоставления доступа к Window, который можно использовать в SSR.

Реализация core библиотек

Приведу реализацию выше описанных сервисов и модулей с рядом комментариев.

ApiService

ApiService — обертка над HttpClient, которая управляет созданием корректных путей к API и сортировкой queryParams.

EnvironmentService

EnvironmentService — обертка над стандартными environment’ами Angular. Данный сервис нужен для передачи envoronment’ов в библиотеки Nx. Это связано с тем, что в монорепозитории может быть несколько приложений с разными environment’ами.

FormExtractsModule

FormExtractsModule — модуль, который содержит pipe для получения FormControl или FormGroup из общей формы в виде FormGroup.

FormGroup по умолчанию возвращает элементы формы как AbstractFormControl. Для того, чтобы явно получать FormControl, необходимо задавать тип явно, например, с помощью директив.

Модуль содержит два пайпа и директиву:

• BanshopExtractFormControlPipe — явное приведение AbstractFormControl к FormControl
• BanshopExtractFormGroupPipe — явное приведение AbstractFormControl к FormGroup
• ExtractTouchedDirective — директива, которая позволяет отслеживать изменения touched событий на FormControl и обновлять отображение компонента.

ExtractTouchedDirective это одно из узких мест Angular Form. Если создать компонент и передать туда с помощью Input FormControl, то дочерний компонент не будет видеть изменения родительской формы, так как Ivy не дает возможности корректно пробрасывать события в вкладываемые шаблоны и компоненты.

FormMaskService

HammerModule

HammerModule — модуль для настройки Hammerjs.

LayoutService

LayoutService — сервис построен на BreakpointObserver и возвращает текущий тип платформы для отображения. В данном случае рассматривается три платформы: handset, tablet и web.

Подробнее в следующей статье — Создание UI KIT.

Meta

MetaService — сервис для задачи мета тегов для страниц. В данном случае будут задаваться следующие свойства:

• pageTitle — HTML заголовок страницы;
• description — описание страницы;
• keywords — ключевые слова;
• og:title — заголовок;
• og:description — описание страницы;
• og:type — тип страницы;
• og:locale — язык страницы;
• og:image — изображение страницы;
• og:image:type — тип изображения;
• og:image:width — ширина изображения;
• og:image:height — высота изображения.

В данном случае метод добавления мета тегов работает следующим образом:

• Ищется соответствующий тег на странице
• Если тега нет, создается новый и добавляется на страницу. Иначе просто меняется значение.

NavigationSerive и NavigationPipesModule

NavigationService — сервис, который генерирует пути в приложении.

Как видно из реализации, NavigationService получает строку с путем, в котором могут быть параметры, разбирает ее и подставляет соответствующие параметры.

PlatformService

PlatformService — сервис, который возвращает тип запущенной платформы (browser, server, webworker).

Из-за того, что в SSR часто нужно проверять платформу, есть смысл создать быстрый доступ к проверке — isPlatformBrowser(this.platformId).

Storage

Библиотека содержит ряд модулей и интерфейсов для кроссплатформенной работы с веб хранилищами.

Реализация сервисов:

RootStoreModule

RootStoreModule — модуль главного хранилища в приложении.

Тестирование

Реализация PageObject и провайдеров в Angular:

DestroyService

DestroyService — сервис отписки при OnDesroy.

Оператор isNotNullOrUndefined

NullabeType

WindowService

WindowService — обращение к window не через глобальный объект, которого нет в NodeJS.

Ссылки

Оглавление

Предыдущая статья —Создание Angular приложения.

Следующая статья — Создание UI KIT.

Все исходники находятся на github, в репозитории:

GitHub — Fafnur/banshop: Пример сайта визитки на Angular, вместе с Angular Universal и локализацией

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — article.

Подписывайтесь на блог, чтобы не пропустить новые статьи про Angular, и веб-разработку. Medium | Telegram| VK |Tw| Ln