Перейти к содержанию

Структура приложения

Разберем, что представляет собой архитектура Angular приложения.

Сам фреймворк состоит из нескольких библиотек (или модулей), каждая из которых содержит в себе определенный функционал, а каждый модуль состоит из совокупности классов и их свойств и методов.

Каждый класс имеет свое функциональное предназначение.

Не все библиотеки обязательны для использования в приложении (англ. Angular App), часть подключается по мере необходимости, например, FormsModule или HttpClientModule.

Модуль

Разберем модули, именно с них начинается проектирование архитектуры Angular приложения. Каждый из них имеет собственный набор структурных элементов:

  • component — отвечает за часть web-страницы и включает в себя HTML-шаблон, CSS-стили и логику поведения;
  • service — поставщик данных для component;
  • directive — преобразует определенную часть DOM заданным образом.

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

Корневой модуль может быть только один, но он может использовать функционал других модулей, объявленных в объекте декоратора @NgModule() в свойстве imports.

@NgModule() — это декоратор, который принимает описывающий модуль объект.

Перечень свойств объекта:

  • declarations — компоненты (Component), директивы (Directive) и фильтры (Pipe) корневого модуля;
  • exports — компоненты, сервисы, директивы и фильтры, доступные для использования разработчикам, которые будут использовать ваш модуль в своих разработках;
  • imports — другие модули, используемые в корневом модуле;
  • providers — сервисы (Service) приложения;
  • bootstrap — имя главного компонента приложения (как правило, называется AppComponent).

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

Компонент

Компонент — это часть интерфейса приложения с собственной логикой. Вся видимая часть Angular App реализуется с помощью компонентов, поэтому часто можно услышать, что архитектура Angular компонентная.

Ранее уже упоминалось, что за создание компонента отвечает декоратор @Component(). Основные свойства объекта, который принимает декоратор:

  • selector — название компонента;
  • template (или templateUrl) — HTML-разметка в виде строки (или путь к HTML-файлу);
  • providers — список сервисов, поставляющих данные для компонента;
  • styles — массив путей к CSS-файлам, содержащим стили для создаваемого компонента.

Все компоненты в совокупности и есть Angular App.

Сервис

Сервисы нужны для предоставления данных компонентам. Это могут быть не только запросы к серверу, но и функции, преобразующие исходные данные по заданному алгоритму. Они позволяют архитектуре Angular приложения быть более гибкой и масштабируемой.

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

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

Директива

Предназначение директив — преобразование DOM заданным образом, наделение элемента поведением.

По своей реализации директивы практически идентичны компонентам, компонент — это директива с HTML-шаблоном, но с концептуальной точки зрения они различны.

Есть два вида директив:

  • структурные — добавляют, удаляют или заменяют элементы в DOM;
  • атрибуты — задают элементу другое поведение.

Они создаются с помощью декоратора @Directive() с конфигурационным объектом.

В Angular имеется множество встроенных директив (*ngFor, *ngIf), но зачастую их недостаточно для больших приложений, поэтому приходится реализовывать свои.

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

Ссылки

Комментарии