Kako radi Angular?

Angular radi na osnovu arhitekture MVC/MVVM. Koristi komponente, vezivanje podataka i ubrizgavanje zavisnosti za pravljenje interaktivnih veb aplikacija.

Glavni koncepti:

• Komponente: Građevni blokovi aplikacije, sastavljeni od šablona, klase i stilova.
• Moduli (NgModules): Grupiraju povezane komponente, servise i druge elemente.
• Vezivanje podataka: Sinhronizuje podatke između modela i prikaza.
  • Jednosmerno vezivanje: Podaci teku u jednom pravcu (npr. od modela ka prikazu).
  • Dvosmerno vezivanje [()]: Promene u modelu utiču na prikaz i obrnuto.
• Servisi: Obezbeđuju funkcionalnost koja može biti korišćena od strane različitih komponenti (npr. rad sa HTTP zahtevima).
• Ubrizgavanje zavisnosti (DI): Mehanizam za obezbeđivanje zavisnosti (npr. servisa) komponentama.
• Šabloni: HTML sa proširenjima Angular sintakse za prikaz podataka i obradu događaja.
• Direktive: Mijenjaju ponašanje ili izgled elemenata DOM-a.
  • Strukturne: Dodaju, uklanjaju ili manipulišu elementima DOM-a (*ngIf, *ngFor).
  • Atributne: Mijenjaju izgled ili ponašanje postojećeg elementa ([ngClass], [ngStyle]).
• Životni ciklus komponenti: Skup hook-ova koji omogućavaju izvršavanje koda u različitim fazama života komponente (OnInit, OnDestroy).
• NgZone: Osigurava automatsko prepoznavanje promena i ažuriranje prikaza pri asinhronim operacijama.

Proces rada:

1. Učitavanje: Aplikacija se učitava, Bootstrap modul pokreće korenski komponent.
2. Renderovanje: Angular kompajlira šablone i kreira strukturu DOM.
3. Vezivanje podataka: Uspostavlja se veza između podataka i prikaza.
4. Obrada događaja: Slušaoci događaja reaguju na akcije korisnika.
5. Prepoznavanje promena: Zona prati asinhrone operacije.
6. Ažuriranje prikaza: Kada se otkriju promene, Angular ažurira odgovarajuće delove DOM-a.

Primer dvosmernog vezivanja podataka:

<!-- U šablonu -->
<input [(ngModel)]="userName">
<p>Zdravo, {{ userName }}!</p>

// U klasi komponente
export class MyComponent {
  userName: string = '';
}