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

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

Разберем, что представляет собой архитектура 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 посвящена отдельная глава, где все подробно расписано и показано на примерах.

Ссылки

Комментарии