Как работи 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 = '';
}