На какие сущности разделяется Angular приложение?

Архитектура Angular-приложения: разделение на сущности

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

1. Модули (Modules)

Модули — это контейнеры, которые объединяют логически связанный функционал. Каждое Angular-приложение имеет как минимум один корневой модуль (AppModule), но в крупных проектах их множество.

// Пример модуля
@NgModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [AuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Корневые модули: Запускают приложение, определяют bootstrap-компонент.
• Функциональные модули: Группируют код по доменам (например, UserModule, ProductModule).
• Модули маршрутизации: Управляют навигацией (например, AppRoutingModule).
• Общие модули: Содержат переиспользуемые компоненты/директивы (например, SharedModule).

2. Компоненты (Components)

Компоненты — это основные строительные блоки UI. Каждый компонент управляет частью экрана (шаблоном) через связанные с ним данные и логику.

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  user: User;
  
  constructor(private service: UserService) {}
}

• Селектор: Позволяет встраивать компонент в шаблоны.
• Шаблон (HTML): Определяет разметку, может включать другие компоненты.
• Стили (CSS): Локальные или глобальные стили для компонента.
• Логика (TypeScript): Класс с данными и методами для управления состоянием и взаимодействия с сервисами.

3. Шаблоны (Templates)

Шаблоны — это HTML-разметка, обогащенная синтаксисом Angular для динамического отображения данных и обработки событий.

<!-- Пример шаблона с директивами и привязками -->
<div *ngIf="isActive">
  <h2>{{ title }}</h2>
  <button (click)="handleClick()">Click me</button>
  <app-child [data]="user"></app-child>
</div>

• Интерполяция: {{ expression }} для вывода данных.
• Привязка свойств: [property]="expression" для передачи данных в дочерние компоненты или элементы.
• Привязка событий: (event)="handler()" для реагирования на действия пользователя.
• Директивы: Структурные (*ngIf, *ngFor) и атрибутные (ngClass, ngStyle).

4. Сервисы (Services)

Сервисы — это классы, инкапсулирующие бизнес-логику, работу с данными и сторонними API. Они следуют принципу инъекции зависимостей (DI).

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}
  
  fetchData(): Observable<Data[]> {
    return this.http.get<Data[]>('/api/data');
  }
}

• Инъекция зависимостей: Angular автоматически предоставляет экземпляры сервисов там, где они запрашиваются.
• Синглтон-паттерн: Часто сервисы существуют в единственном экземпляре на всё приложение.
• Ответственность: HTTP-запросы, управление состоянием, утилиты.

5. Директивы (Directives)

Директивы расширяют поведение DOM-элементов. Бывают трёх типов:

• Компоненты: Директивы с шаблоном (рассмотрены выше).
• Структурные директивы: Меняют структуру DOM (например, *ngFor, *ngIf).
• Атрибутные директивы: Изменяют внешний вид или поведение элемента (например, ngClass, ngStyle, кастомные директивы).

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @HostListener('mouseenter') onMouseEnter() {
    // Логика изменения стилей
  }
}

6. Маршруты (Routes)

Маршрутизация позволяет организовать навигацию между компонентами как в SPA. Определяется в модуле маршрутизации.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'users', component: UserListComponent },
  { path: '**', redirectTo: 'home' }
];

• Параметры маршрутов: Динамические сегменты (/users/:id).
• Ленивая загрузка (Lazy Loading): Позволяет загружать модули по мере необходимости.
• Стражи (Guards): Контролируют доступ к маршрутам (CanActivate, CanDeactivate).

7. Конвейеры (Pipes)

Конвейеры преобразуют данные прямо в шаблонах. Бывают встроенные (date, currency) и кастомные.

@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Использование: {{ 'hello' | reverse }} → olleh.

8. Модели данных (Models/Interfaces)

Модели — это TypeScript-интерфейсы или классы, описывающие структуру данных. Они обеспечивают типизацию и удобство работы.

export interface User {
  id: number;
  name: string;
  email: string;
}

9. Внедрение зависимостей (Dependency Injection)

DI — это механизм, который предоставляет экземпляры сервисов компонентам и другим сервисам. Централизует управление зависимостями и упрощает тестирование.

Принципы взаимодействия сущностей

• Иерархия компонентов: Приложение строится как дерево компонентов, где данные передаются сверху вниз через @Input(), а события снизу вверх через @Output().
• Связь через сервисы: Компоненты могут общаться через общие сервисы (например, с использованием Subject из RxJS).
• Модульная инкапсуляция: Каждый модуль объявляет свои компоненты, директивы, конвейеры и может экспортировать их для повторного использования.

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