Hogyan működik az Angular?

Az Angular egy keretrendszer egylapos alkalmazások (SPA) létrehozásához. Fő összetevői és alapelvei:

• Modularitás: Az alkalmazások modulokból épülnek fel. Az @NgModule határozza meg, hogy mely komponensek, szolgáltatások és egyéb elemek tartoznak egy modulhoz.
• Komponensek: Az Angular alkalmazások fő építőkövei. Minden komponens egy sablomból (HTML), egy TypeScript osztályból (logika) és stílusokból (CSS) áll. A Component dekorátor köti össze őket.
• Adat kötés (Data Binding): Az Angular összekapcsolja a komponens osztályában lévő adatokat a sablonban megjelenő tartalommal. Vannak egysíkú (property binding, interpolation) és kétirányú (ngModel) kötés típusok.
• Direktívák: A DOM elemek viselkedését vagy megjelenését módosítják. Strukturális (*ngIf, *ngFor) és attribútum típusú (ngClass, ngStyle).
• Szolgáltatások (Services): Olyan osztályok, amelyek logikát tartalmaznak, amit több komponens is használhat. Adatok lekérésére, üzleti logikára stb. használják.
• Függőségi injektálás (Dependency Injection): Az Angular által biztosított mechanizmus, amely szolgáltatásokat nyújt komponenseknek vagy más szolgáltatásoknak. Rugalmassá és tesztelhetővé teszi a kódot.
• Routing: Lehetővé teszi az alkalmazás különböző nézetei közötti navigációt oldal újratöltése nélkül. A RouterModule és útvonal konfiguráció segítségével definiálható.
• Komponens életciklusa: Egy sor esemény, amely a komponens létrehozásától a megsemmisítéséig történik. Az Angular hook-okat (metódusokat) biztosít, amelyeket implementálhatunk bizonyos szakaszokban (ngOnInit, ngOnDestroy).
• Változás észlelése (Change Detection): A mechanizmus, amely meghatározza, mikor kell frissíteni a nézetet (DOM) az alkalmazás adataiban bekövetkezett változások alapján. Az Angular zónákat (NgZone) használ az aszinkron események követésére és a változás észlelésének automatikus indítására.
• Sablonok (Templates): Angular kiterjesztésekkel ellátott HTML, adatkötéshez, direktívákhoz és kifejezésekhez.
• RxJS: Az Angular aktívan használja az RxJS könyvtárat az aszinkron adatok és eseményfolyamok kezelésére.

Magas szintű munkafolyamat:

1. Betöltés: A böngésző betölti az index.html-t.
2. Indítás: A gyökéralkalmazás elindul, általában a main.ts-ben.
3. Bootstrapping: A @NgModule a gyökérmodulhoz (általában AppModule) betöltődik a platform-browser segítségével.
4. Renderelés: Az Angular létrehozza és rendereli a komponenseket, kezdve a gyökértől.
5. Adat kötés: A komponens osztályok adatai kötődnek a sablonokhoz.
6. Változás észlelése: Az Angular figyeli az adatok változásait, és frissíti a nézetet.
7. Routing: A nézetek közötti átmeneteket a router kezeli.

// Egyszerű komponens példa
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Címke neve a sablonban való használathoz
  template: `<p>{{ message }}</p>`, // Komponens sablonja
  styles: ['p { color: blue; }'] // Komponens stílusai
})
export class GreetComponent {
  // Komponens logikája
  message = 'Üdv az Angular-tól!';
}

// Szolgáltatás DI-vel való használatának példája
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // A szolgáltatás elérhető a gyökér injektorban
})
export class DataService {
  getData(): string {
    return 'Szolgáltatási adatok';
  }
}

// Szolgáltatást használó komponensben
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) { // Szolgáltatás injektálása
  }

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

Az Angular a TypeScript-et és az HTML sablonokat JavaScript-re fordítja a build folyamat során (alapértelmezett AOT fordítás), ami növeli a teljesítményt.