Kā darbojas Angular?

Angular ir pamatojas uz MVC/MVVM arhitekturu. Tas izmanto komponentes, datu saiti un atkaribu ievadi, lai veidotu interaktivas web aplikacijas.

Galvenie koncepti:

• Komponentes: Aplikacijas celtniecibas bloki, kas sastav no shablona, klases un stiliem.
• Moduli (NgModules): Apvieno saistitas komponentes, servisus un citus elementus.
• Datu saite: Sinhronize datus starp modeli un skatu.
  • Vienvirziena saite: Dati plūst vienā virzienā (piemēram, no modeļa uz skatu).
  • Divvirziena saite [()]: Izmaiņas modelī ietek skatu un otrādi.
• Servisi: Nodrošina funkcionalitāti, ko var izmantot dažādi komponenti (piemēram, ar HTTP pieprasījumiem).
• Atkarību injekcija (DI): Mehānisms, kas nodrošina atkarības (piemēram, servisus) komponentiem.
• Shabloni: HTML ar Angular sintakses paplašinājumiem datu attēlošanai un notikumu apstrādei.
• Direktīvas: Maina DOM elementu uzvedību vai izskatu.
  • Strukturālās: Pievieno, noņem vai manipulē ar DOM elementiem (piemēram, *ngIf, *ngFor).
  • Atribūtu: Maina esoša elementa izskatu vai uzvedību (piemēram, [ngClass], [ngStyle]).
• Komponentu dzīves cikls: Huki, kas ļauj izpildīt kodu dažādos komponenta dzīves posmos (piemēram, OnInit, OnDestroy).
• NgZone: Nodrošina automātisku izmaiņu atklāšanu un skata atjaunināšanu asinhronās operācijās.

Darba process:

1. Ielāde: Lietojumprogramma tiek ielādēta, Bootstrap modulis palaidīs galveno komponentu.
2. Renderēšana: Angular kompilē šablonus un izveido DOM struktūru.
3. Datu saite: Tiek izveidots savienojums starp datiem un skatu.
4. Notikumu apstrāde: Notikumu klausītāji reaģē uz lietotāja darbībām.
5. Izmaiņu atklāšana: Zona seko asinhronām operācijām.
6. Skata atjaunināšana: Atklājot izmaiņas, Angular atjaunina attiecīgās DOM daļas.

Divvirziena datu saites piemērs:

<!-- Šablonā -->
<input [(ngModel)]="userName">
<p>Sveiki, {{ userName }}!</p>

// Komponenta klasē
export class MyComponent {
  userName: string = '';
}