Jak działa Angular?

Angular działa na podstawie architektury MVC/MVVM. Używa komponentów, wiązania danych i wstrzykiwania zależności do tworzenia interaktywnych aplikacji internetowych.

Główne koncepcje:

• Komponenty: Bloki konstrukcyjne aplikacji, składające się z szablonu, klasy i stylów.
• Moduły (NgModules): Grupują powiązane komponenty, serwisy i inne elementy.
• Wiązanie danych: Synchronizuje dane między modelem a widokiem.
  • Wiązanie jednostronne: Dane przepływają w jednym kierunku (np. od modelu do widoku).
  • Wiązanie dwukierunkowe [()]: Zmiany w modelu wpływają na widok i odwrotnie.
• Serwisy: Zapewniają funkcjonalność, którą mogą wykorzystywać różne komponenty (np. obsługa żądań HTTP).
• Wstrzykiwanie zależności (DI): Mechanizm dostarczania zależności (np. serwisów) do komponentów.
• Szablony: HTML z rozszerzeniami składni Angular do wyświetlania danych i obsługi zdarzeń.
• Dyrektywy: Zmieniają zachowanie lub wygląd elementów DOM.
  • Strukturalne: Dodają, usuwają lub manipulują elementami DOM (np. *ngIf, *ngFor).
  • Atrybutowe: Zmieniają wygląd lub zachowanie istniejącego elementu (np. [ngClass], [ngStyle]).
• Cykl życia komponentów: Zbiór hooków pozwalających na wykonywanie kodu na różnych etapach życia komponentu (np. OnInit, OnDestroy).
• NgZone: Zapewnia automatyczne wykrywanie zmian i aktualizację widoku podczas operacji asynchronicznych.

Proces pracy:

1. Ładowanie: Aplikacja jest ładowana, moduł Bootstrap uruchamia główny komponent.
2. Renderowanie: Angular kompiluje szablony i tworzy strukturę DOM.
3. Wiązanie danych: Ustanawia się połączenie między danymi a widokiem.
4. Obsługa zdarzeń: Nasłuchiwacze zdarzeń reagują na działania użytkownika.
5. Wykrywanie zmian: Zona monitoruje operacje asynchroniczne.
6. Aktualizacja widoku: Po wykryciu zmian Angular aktualizuje odpowiednie części DOM.

Przykład dwukierunkowego wiązania danych:

<!-- W szablonie -->
<input [(ngModel)]="userName">
<p>Cześć, {{ userName }}!</p>

// W klasie komponentu
export class MyComponent {
  userName: string = '';
}