Ako funguje Angular?

Angular funguje ako rámec na tvorbu jednostránkových aplikácií (SPA). Jeho kľúčové komponenty a princípy:

• Modularita: Aplikácie sú zostavené z modulov. @NgModule určuje, ktoré komponenty, služby a ďalšie prvky patria do modulu.
• Komponenty: Hlavné stavebné bloky Angular aplikácií. Každý komponent pozostáva zo šablóny (HTML), triedy TypeScript (logika) a štýlov (CSS). Dekorátor Component ich spája.
• Dátové väzby (Data Binding): Angular zabezpečuje spojenie medzi dátami v triede komponentu a zobrazením v šablóne. Existujú jednostranné (property binding, interpolation) a obojstranné (ngModel) väzby.
• Direktívy: Menia správanie alebo vzhľad prvkov DOM. Sú štrukturálne (*ngIf, *ngFor) a atribútové (ngClass, ngStyle).
• Služby (Services): Triedy obsahujúce logiku, ktorú môže používať viacero komponentov. Používajú sa na získavanie dát, biznis logiku atď.
• Vkladanie závislostí (Dependency Injection): Mechanizmus, ktorým Angular poskytuje služby komponentom alebo iným službám. Robí kód flexibilnejším a testovateľnejším.
• Routing: Umožňuje navigáciu medzi rôznymi zobrazeniami (komponentmi) aplikácie bez obnovenia stránky. Definuje sa pomocou RouterModule a konfigurácie trás.
• Životný cyklus komponentu: Séries udalostí, ktoré sa dejú od vytvorenia po zničenie komponentu. Angular poskytuje hooky (metódy), ktoré možno implementovať na vykonanie akcií v určitých fázach (ngOnInit, ngOnDestroy).
• Detekcia zmien (Change Detection): Mechanizmus, ktorý určuje, kedy je potrebné aktualizovať zobrazenie (DOM) na základe zmien v dátach aplikácie. Angular používa zóny (NgZone) na sledovanie asynchrónnych udalostí a automatické spustenie detekcie zmien.
• Šablóny (Templates): HTML s rozšíreniami Angular na väzbu dát, direktívy a výrazy.
• RxJS: Angular aktívne využíva knižnicu RxJS na prácu s asynchrónnymi dátami a tokmi udalostí.

Proces práce na vysokej úrovni:

1. Načítanie: Prehliadač načíta index.html.
2. Štart: Spúšťa sa koreňová časť aplikácie, zvyčajne v main.ts.
3. Bootstrapping: @NgModule pre koreňový modul (zvyčajne AppModule) sa načíta pomocou platform-browser.
4. Renderovanie: Angular vytvára a renderuje komponenty, začínajúc od koreňa.
5. Dáta väzba: Dáta z tried komponentov sa viažu na šablóny.
6. Detekcia zmien: Angular sleduje zmeny v dátach a aktualizuje zobrazenie.
7. Routing: Prechody medzi zobrazeniami sú riadené routerom.

// Príklad jednoduchej komponenty
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Názov tagu na použitie v šablóne
  template: `<p>{{ message }}</p>`, // Šablóna komponentu
  styles: ['p { color: blue; }'] // Štýly komponentu
})
export class GreetComponent {
  // Logika komponentu
  message = 'Ahoj od Angular!';
}

// Príklad použitia služby s DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Služba je dostupná v koreňovom injektore
})
export class DataService {
  getData(): string {
    return 'Dáta zo služby';
  }
}

// V komponent, ktorý používa 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) { // Vloženie služby
  }

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

Angular kompiluje TypeScript a HTML šablóny do JavaScriptu počas procesu build (štandardne AOT kompilácia), čo zvyšuje výkon.