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

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