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

Angular работает как фреймворк для создания одностраничных приложений (SPA). Его ключевые компоненты и принципы:

• Модульность: Приложения строятся из модулей. @NgModule определяет, какие компоненты, сервисы и другие элементы принадлежат модулю.
• Компоненты: Основные строительные блоки Angular-приложений. Каждый компонент состоит из шаблона (HTML), класса TypeScript (логика) и стилей (CSS). Component декоратор связывает их вместе.
• Привязка данных (Data Binding): Angular обеспечивает связь между данными в классе компонента и представлением в шаблоне. Существуют односторонняя (property binding, interpolation) и двухсторонняя привязка данных (ngModel).
• Директивы: Изменяют поведение или внешний вид элементов DOM. Бывают структурные (*ngIf, *ngFor) и атрибутные (ngClass, ngStyle).
• Сервисы: Классы, содержащие логику, которая может быть использована несколькими компонентами. Используются для получения данных, бизнес-логики и т.д.
• Внедрение зависимостей (Dependency Injection): Механизм, с помощью которого Angular предоставляет сервисы компонентам или другим сервисам. Позволяет делать код более гибким и тестируемым.
• Роутинг (Routing): Позволяет навигировать между различными представлениями (компонентами) приложения без перезагрузки страницы. Определяется с помощью RouterModule и конфигурации маршрутов.
• Жизненный цикл компонента (Component Lifecycle): Серия событий, происходящих с компонентом от момента создания до уничтожения. Angular предоставляет хуки (методы), которые можно реализовать для выполнения действий на определенных этапах (например, ngOnInit, ngOnDestroy).
• Изменение обнаружения (Change Detection): Механизм, который определяет, когда нужно обновить представление (DOM) на основе изменений в данных приложения. Angular использует зоны (NgZone) для отслеживания асинхронных событий и автоматического запуска обнаружения изменений.
• Шаблоны (Templates): HTML с расширениями Angular