Jak działa Angular?

Angular działa jako framework do tworzenia aplikacji jednostronicowych (SPA). Jego kluczowe komponenty i zasady:

• Modularność: Aplikacje są budowane z modułów. @NgModule określa, które komponenty, serwisy i inne elementy należą do modułu.
• Komponenty: Główne elementy budulcowe aplikacji Angular. Każdy komponent składa się z szablonu (HTML), klasy TypeScript (logika) i stylów (CSS). Dekorator Component łączy je.
• Wiązanie danych (Data Binding): Angular zapewnia powiązanie między danymi w klasie komponentu a widokiem w szablonie. Istnieją wiązania jednostronne (property binding, interpolacja) i dwustronne (ngModel).
• Dyrektywy: Zmieniają zachowanie lub wygląd elementów DOM. Mogą być strukturalne (*ngIf, *ngFor) lub atrybutowe (ngClass, ngStyle).
• Serwisy: Klasy zawierające logikę, którą można używać przez wiele komponentów. Służą do pobierania danych, logiki biznesowej itp.
• Wstrzykiwanie zależności (Dependency Injection): Mechanizm, dzięki któremu Angular dostarcza serwisy do komponentów lub innych serwisów. Umożliwia bardziej elastyczny i testowalny kod.
• Routing: Umożliwia nawigację między różnymi widokami (komponentami) aplikacji bez przeładowania strony. Definiuje się go za pomocą RouterModule i konfiguracji tras.
• Cykl życia komponentu: Seria zdarzeń od momentu utworzenia do zniszczenia komponentu. Angular zapewnia haki (metody), które można zaimplementować, aby wykonywać działania na określonych etapach (ngOnInit, ngOnDestroy).
• Wykrywanie zmian (Change Detection): Mechanizm, który określa, kiedy zaktualizować widok (DOM) na podstawie zmian w danych aplikacji. Angular używa stref (NgZone) do śledzenia zdarzeń asynchronicznych i automatycznego uruchamiania wykrywania zmian.
• Szablony (Templates): HTML z rozszerzeniami Angular do wiązania danych, dyrektyw i wyrażeń.
• RxJS: Angular aktywnie korzysta z biblioteki RxJS do pracy z danymi asynchronicznymi i strumieniami zdarzeń.

Proces na wysokim poziomie:

1. Ładowanie: Przeglądarka ładuje index.html.
2. Start: Rozpoczyna się główny moduł aplikacji, zwykle w main.ts.
3. Bootstrap: @NgModule dla głównego modułu (zwykle AppModule) jest ładowany za pomocą platform-browser.
4. Renderowanie: Angular tworzy i renderuje komponenty, zaczynając od głównego.
5. Wiązanie danych: Dane z klas komponentów są wiązane z szablonami.
6. Wykrywanie zmian: Angular monitoruje zmiany danych i aktualizuje widok.
7. Routing: Przejścia między widokami są obsługiwane przez router.

// Przykład prostego komponentu
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Nazwa tagu do użycia w szablonie
  template: `<p>{{ message }}</p>`, // Szablon komponentu
  styles: ['p { color: blue; }'] // Style komponentu
})
export class GreetComponent {
  // Logika komponentu
  message = 'Witaj od Angular!';
}

// Przykład użycia serwisu z DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Serwis dostępny w głównym iniektorze
})
export class DataService {
  getData(): string {
    return 'Dane z serwisu';
  }
}

// W komponencie korzystającym z serwisu
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) { // Wstrzykiwanie serwisu
  }

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

Angular kompiluje TypeScript i szablony HTML do JavaScript podczas procesu budowania (domyślnie kompilacja AOT), co poprawia wydajność.