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 для привязки данных, директив и выражений.
- RxJS: Angular активно использует библиотеку RxJS для работы с асинхронными данными и потоками событий.
Процесс работы высокоуровнево:
- Загрузка: Браузер загружает
index.html.
- Старт: Запускается корень приложения, обычно находящийся в
main.ts.
- Бутстрап:
@NgModule для корневого модуля (обычно AppModule) загружается с помощью platform-browser.
- Рендеринг: Angular создает и рендерит компоненты, начиная с корневого.
- Привязка данных: Данные из классов компонентов связываются с шаблонами.
- Обнаружение изменений: Angular мониторит изменения данных и обновляет представление.
- Роутинг: Переходы между представлениями обрабатываются роутером.
typescript
typescript
typescript
Angular компилирует TypeScript и HTML-шаблоны в JavaScript в процессе сборки (AOT compilation по умолчанию), что повышает производительность.