Как работает Angular?

Angular работает на основе архитектуры MVC/MVVM. Он использует компоненты, привязку данных и внедрение зависимостей для построения интерактивных веб-приложений.

Основные концепции:

• Компоненты: Строительные блоки приложения, состоящие из шаблона, класса и стилей.

• Модули (NgModules): Объединяют связанные компоненты, сервисы и другие элементы.

• Привязка данных: Синхронизирует данные между моделью и представлением.

  • Односторонняя привязка: Данные текут в одном направлении (например, от модели к представлению).
  • Двусторонняя привязка [()]: Изменения в модели влияют на представление и наоборот.

• Сервисы: Предоставляют функциональность, которая может быть использована разными компонентами (например, работа с HTTP-запросами).

• Внедрение зависимостей (DI): Механизм предоставления зависимостей (например, сервисов) компонентам.

• Шаблоны: HTML с расширениями Angular-синтаксиса для отображения данных и обработки событий.

• Директивы: Изменяют поведение или внешний вид элементов DOM.

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

• Жизненный цикл компонентов: Набор хуков, позволяющих выполнять код на различных этапах жизни компонента (например, OnInit, OnDestroy).

• Зоны (NgZone): Обеспечивают автоматическое обнаружение изменений и обновление представления при асинхронных операциях.

Процесс работы:

1. Загрузка: Приложение загружается, Bootstrap-модуль запускает корневой компонент.
2. Рендеринг: Angular компилирует шаблоны и создает структуру DOM.
3. Привязка данных: Устанавливается связь между данными и представлением.
4. Обработка событий: Слушатели событий реагируют на действия пользователя.
5. Обнаружение изменений: Зона отслеживает асинхронные операции.
6. Обновление представления: При обнаружении изменений Angular обновляет соответствующие части DOM.

Пример двусторонней привязки данных:

<!-- В шаблоне -->
<input [(ngModel)]="userName">
<p>Привет, {{ userName }}!</p>

// В классе компонента
export class MyComponent {
  userName: string = '';
}