Angular работает на основе архитектуры MVC/MVVM. Он использует компоненты, привязку данных и внедрение зависимостей для построения интерактивных веб-приложений.
Основные концепции:
- Компоненты: Строительные блоки приложения, состоящие из шаблона, класса и стилей.
- Модули (NgModules): Объединяют связанные компоненты, сервисы и другие элементы.
- Привязка данных: Синхронизирует данные между моделью и представлением.
- Односторонняя привязка: Данные текут в одном направлении (например, от модели к представлению).
- Двусторонняя привязка
[()]: Изменения в модели влияют на представление и наоборот.
- Сервисы: Предоставляют функциональность, которая может быть использована разными компонентами (например, работа с HTTP-запросами).
- Внедрение зависимостей (DI): Механизм предоставления зависимостей (например, сервисов) компонентам.
- Шаблоны: HTML с расширениями Angular-синтаксиса для отображения данных и обработки событий.
- Директивы: Изменяют поведение или внешний вид элементов DOM.
- Структурные: Добавляют, удаляют или манипулируют элементами DOM (например,
*ngIf, *ngFor).
- Атрибутные: Изменяют внешний вид или поведение существующего элемента (например,
[ngClass], [ngStyle]).
- Жизненный цикл компонентов: Набор хуков, позволяющих выполнять код на различных этапах жизни компонента (например,
OnInit, OnDestroy).
- Зоны (NgZone): Обеспечивают автоматическое обнаружение изменений и обновление представления при асинхронных операциях.
Процесс работы:
- Загрузка: Приложение загружается, Bootstrap-модуль запускает корневой компонент.
- Рендеринг: Angular компилирует шаблоны и создает структуру DOM.
- Привязка данных: Устанавливается связь между данными и представлением.
- Обработка событий: Слушатели событий реагируют на действия пользователя.
- Обнаружение изменений: Зона отслеживает асинхронные операции.
- Обновление представления: При обнаружении изменений Angular обновляет соответствующие части DOM.
Пример двусторонней привязки данных:
html
typescript