Как работи Angular?

Angular работи като рамка за създаване на едностранични приложения (SPA). Основните му компоненти и принципи:

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

Процесът на работа на високо ниво:

1. Зареждане: Браузърът зарежда index.html.
2. Старт: Започва се кореновата част на приложението, обикновено в main.ts.
3. Бутстрап: @NgModule за кореновия модул (обикновено AppModule) се зарежда чрез platform-browser.
4. Рендериране: Angular създава и рендерира компонентите, започвайки от корена.
5. Обвързване на данни: Данните от класовете на компонентите се свързват с шаблоните.
6. Обнаружаване на промени: Angular следи промените в данните и обновява изгледа.
7. Routing: Преходите между изгледите се управляват от рутера.

// Пример за прост компонент
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Името на таг за използване в шаблона
  template: `<p>{{ message }}</p>`, // Шаблон на компонента
  styles: ['p { color: blue; }'] // Стилове на компонента
})
export class GreetComponent {
  // Логика на компонента
  message = 'Здравей от Angular!';
}

// Пример за използване на услуга с DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Услугата е достъпна в кореновия инжектор
})
export class DataService {
  getData(): string {
    return 'Данни от услугата';
  }
}

// В компонент, който използва услугата
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Внедряване на услуга
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

Angular компилира TypeScript и HTML шаблоните в JavaScript по време на сборката (по подразбиране AOT компилация), което подобрява производителността.