Kaip veikia Angular?

Angular yra pagrįstas MVC/MVVM architektūra. Jis naudoja komponentus, duomenų ryšį ir priklausomybių injekciją interaktyvių žiniatinklio programų kūrimui.

Pagrindinės koncepcijos:

• Komponentai: Programos statybiniai blokai, sudaryti iš šablono, klasės ir stilių.
• Moduliai (NgModules): Sujungia susijusius komponentus, paslaugas ir kitus elementus.
• Duomenų ryšys: Sinchronizuoja duomenis tarp modelio ir vaizdo.
  • Vienpusis ryšys: Duomenys teka viena kryptimi (pavyzdžiui, nuo modelio iki vaizdo).
  • Dvikryptis ryšys [()]: Pakeitimai modelyje veikia vaizdą ir atvirkščiai.
• Paslaugos: Teikia funkcionalumą, kurį gali naudoti skirtingi komponentai (pavyzdžiui, darbui su HTTP užklausomis).
• Priklausomybių injekcija (DI): mechanizmas, teikiantis priklausomybes (pavyzdžiui, paslaugas) komponentams.
• Šablonai: HTML su Angular sintaksės išplėtimais duomenų rodymui ir įvykių apdorojimui.
• Direktyvos: Keičia DOM elementų elgesį arba išvaizdą.
  • Struktūrinės: Prideda, pašalina arba manipuliuoja DOM elementais (pavyzdžiui, *ngIf, *ngFor).
  • Atributinės: Keičia esamo elemento išvaizdą arba elgesį (pavyzdžiui, [ngClass], [ngStyle]).
• Komponentų gyvenimo ciklas: Rinkinys kabliukų, leidžiančių vykdyti kodą skirtinguose komponento gyvenimo etapuose (pavyzdžiui, OnInit, OnDestroy).
• NgZone: užtikrina automatinį pokyčių aptikimą ir vaizdo atnaujinimą asinchroninėse operacijose.

Darbo procesas:

1. Įkėlimas: Programa įkeliamas, Bootstrap modulis paleidžia pagrindinį komponentą.
2. Renderavimas: Angular kompiliuoja šablonus ir kuria DOM struktūrą.
3. Duomenų ryšys: Nustatomas ryšys tarp duomenų ir vaizdo.
4. Įvykių apdorojimas: Įvykių klausytojai reaguoja į naudotojo veiksmus.
5. Pokyčių aptikimas: Zona stebi asinchronines operacijas.
6. Vaizdo atnaujinimas: Kai aptinkami pokyčiai, Angular atnaujina atitinkamas DOM dalis.

Dvikryptis duomenų ryšio pavyzdys:

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

// Komponento klasėje
export class MyComponent {
  userName: string = '';
}