Kuidas töötab Angular?

Angular põhineb MVC/MVVM arhitektuuril. See kasutab komponente, andmebaasi ja sõltuvuste süstimist interaktiivsete veebirakenduste loomiseks.

Peamised kontseptsioonid:

• Komponendid: Rakenduse ehitusplokid, mis koosnevad mallist, klassist ja stiilidest.
• Moodulid (NgModules): Koondavad seotud komponente, teenuseid ja teisi elemente.
• Andmebaas: Sünkroniseerib andmeid mudeli ja vaate vahel.
  • Üks suund: Andmed voolavad ühest suunast (näiteks mudelist vaatesse).
  • Kahe suuna andmebaas [()]: Muudatused mudelis mõjutavad vaadet ja vastupidi.
• Teenused: Pakuvad funktsionaalsust, mida saab kasutada erinevates komponentides (näiteks HTTP-päringutega töötamine).
• Sõltuvuste süstimine (DI): mehhanism sõltuvuste (näiteks teenuste) komponentidele pakkumiseks.
• Mallid: HTML koos Angulari süntaksi laiendustega andmete kuvamiseks ja sündmuste töötlemiseks.
• Direktiivid: Muudavad DOM elementide käitumist või välimust.
  • Struktuursed: Lisavad, eemaldavad või manipuleerivad DOM elemente (näiteks *ngIf, *ngFor).
  • Atribuutide: Muudavad olemasoleva elemendi välimust või käitumist (näiteks [ngClass], [ngStyle]).
• Komponentide elutsükkel: Hukkide kogum, mis võimaldab koodi käivitada erinevatel komponendi eluperioodidel (näiteks OnInit, OnDestroy).
• NgZone: tagab automaatse muutuste tuvastamise ja vaate uuendamise asünkroonsetes operatsioonides.

Tööprotsess:

1. Laadimine: Rakendus laaditakse, Bootstrap moodul käivitab põhikomponendi.
2. Renderdamine: Angular kompileerib mallid ja loob DOM-i struktuuri.
3. Andmebaas: Seob andmed ja vaate.
4. Sündmuste töötlemine: Sündmuste kuulajad reageerivad kasutaja tegevustele.
5. Muutuste tuvastamine: Zone jälgib asünkroonseid operatsioone.
6. Vaate uuendamine: Muutuste tuvastamisel uuendab Angular vastavad DOM osad.

Kahepoolne andmebaas näide:

<!-- Mallis -->
<input [(ngModel)]="userName">
<p>Tere, {{ userName }}!</p>

// Komponendi klassis
export class MyComponent {
  userName: string = '';
}