Общие зависимости и библиотеки

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

Основные пакеты Angular

@angular/core Содержит базовые сущности:

  • компоненты
  • директивы
  • сервисы
  • жизненный цикл
  • декораторы (@Component, @Injectable)

@angular/common Общие инструменты:

  • структурные директивы (ngIf, ngFor)
  • пайпы (DatePipe, CurrencyPipe)
  • утилиты локализации

@angular/platform-browser Адаптация Angular под браузер:

  • загрузка приложения
  • DOM-рендеринг
  • безопасность (sanitization)

@angular/router Маршрутизация:

  • конфигурация путей
  • ленивые модули
  • guards и resolvers
  • параметризованные маршруты

@angular/animations Интеграция анимационной системы:

  • триггеры
  • состояния
  • переходы
  • тайминги и easing

RxJS как фундамент реактивности

RxJS является обязательной зависимостью Angular.

Ключевые сущности:

  • Observable
  • Subject
  • операторы (map, switchMap, mergeMap, debounceTime)
  • подписки и управление потоками данных

Применение RxJS:

  • HTTP-запросы
  • формы
  • события
  • асинхронная логика

Angular тесно интегрирован с RxJS, особенно через HttpClient и реактивные формы.

Zone.js

Zone.js отслеживает асинхронные операции и уведомляет Angular о необходимости запуска change detection.

Используется для:

  • автоматического обновления представления
  • работы с таймерами
  • промисами
  • событиями браузера

Без Zone.js Angular теряет автоматическое отслеживание изменений.

Библиотеки для UI-компонентов

Angular Material

  • официальная библиотека компонентов
  • соответствует Material Design
  • тесная интеграция с Angular CDK

Angular CDK

  • низкоуровневые утилиты
  • overlay
  • drag & drop
  • accessibility
  • virtual scrolling

PrimeNG / NG-ZORRO / Nebular

  • альтернативные UI-наборы
  • расширенные таблицы
  • графики
  • темы и кастомизация

Управление состоянием

Для сложных приложений используются дополнительные библиотеки:

NgRx

  • Redux-подобная архитектура
  • Store, Actions, Reducers, Effects
  • строгая однонаправленная модель данных

Akita

  • более простая модель состояния
  • меньше шаблонного кода
  • удобна для средних проектов

Работа с формами и валидацией

Встроенные модули:

  • FormsModule
  • ReactiveFormsModule

Дополнительные библиотеки:

  • ngx-mask — маски ввода
  • ngx-formly — динамические формы
  • yup — схемы валидации

Утилитарные библиотеки

  • Lodash — работа с коллекциями и объектами
  • date-fns / dayjs — обработка дат
  • uuid — генерация идентификаторов
  • ngx-translate — интернационализация

Интеграция зависимостей через DI

Angular использует иерархический DI-контейнер:

providers: [
  { provide: ApiService, useClass: ApiService }
]

Поддерживаются:

  • useClass
  • useValue
  • useFactory
  • useExisting

Это позволяет:

  • легко подменять реализации
  • тестировать код
  • управлять жизненным циклом сервисов

Грамотный выбор и структурирование зависимостей формирует масштабируемую архитектуру и снижает связность компонентов.

Оглавление