Jak funguje Angular?

Angular funguje jako rámec pro tvorbu jednostránkových aplikací (SPA). Jeho klíčové komponenty a principy:

• Modularita: Aplikace jsou sestaveny z modulů. @NgModule určuje, které komponenty, služby a další prvky patří do modulu.
• Komponenty: Hlavní stavební bloky Angular aplikací. Každá komponenta se skládá ze šablony (HTML), třídy TypeScript (logika) a stylů (CSS). Dekorátor Component je spojuje.
• Datové vazby (Data Binding): Angular zajišťuje spojení mezi daty ve třídě komponenty a zobrazením ve šabloně. Existují jednostranné (property binding, interpolation) a obousměrné (ngModel) vazby.
• Direktivy: Mění chování nebo vzhled prvků DOM. Existují strukturální (*ngIf, *ngFor) a atributové (ngClass, ngStyle).
• Služby (Services): Třídy obsahující logiku, kterou může používat více komponent. Používají se pro získávání dat, business logiku atd.
• Injekce závislostí (Dependency Injection): Mechanismus, kterým Angular poskytuje služby komponentám nebo jiným službám. Umožňuje dělat kód flexibilnější a lépe testovatelný.
• Routing: Umožňuje navigaci mezi různými zobrazeními (komponenty) aplikace bez obnovení stránky. Definuje se pomocí RouterModule a konfigurace tras.
• Životní cyklus komponenty: Série událostí od vytvoření po zničení komponenty. Angular poskytuje hooky (metody), které lze implementovat pro provádění akcí v určitých fázích (ngOnInit, ngOnDestroy).
• Detekce změn (Change Detection): Mechanismus, který určuje, kdy je třeba aktualizovat zobrazení (DOM) na základě změn v datech aplikace. Angular používá zóny (NgZone) k sledování asynchronních událostí a automatickému spuštění detekce změn.
• Šablony (Templates): HTML s rozšířeními Angular pro vazbu dat, direktivy a výrazy.
• RxJS: Angular aktivně využívá knihovnu RxJS pro práci s asynchronními daty a proudy událostí.

Proces práce na vysoké úrovni:

1. Načítání: Prohlížeč načte index.html.
2. Start: Spouští se kořenová aplikace, obvykle v main.ts.
3. Bootstrapping: @NgModule pro kořenový modul (obvykle AppModule) se načte pomocí platform-browser.
4. Renderování: Angular vytváří a renderuje komponenty, počínaje kořenovým.
5. Datové vazby: Data z tříd komponent jsou vázána na šablony.
6. Detekce změn: Angular sleduje změny dat a aktualizuje zobrazení.
7. Routing: Přechody mezi zobrazeními jsou řízeny routerem.

// Příklad jednoduché komponenty
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Název tagu pro použití ve šabloně
  template: `<p>{{ message }}</p>`, // Šablona komponenty
  styles: ['p { color: blue; }'] // Styly komponenty
})
export class GreetComponent {
  // Logika komponenty
  message = 'Ahoj od Angular!';
}

// Příklad použití služby s DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Služba je dostupná v kořenovém injektoru
})
export class DataService {
  getData(): string {
    return 'Data ze služby';
  }
}

// V komponentě, která používá službu
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) { // Injektování služby
  }

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

Angular kompiluje TypeScript a HTML šablony do JavaScriptu během sestavení (výchozí AOT kompilace), což zvyšuje výkon.