Kako radi Angular?

Angular radi kao okvir za kreiranje jednostranica (SPA). Njegove ključne komponente i principi:

• Modularnost: Aplikacije se grade od modula. @NgModule definiše koje komponente, servisi i drugi elementi pripadaju modulu.
• Komponente: Glavni građevni blokovi Angular aplikacija. Svaka komponenta se sastoji od šablona (HTML), TypeScript klase (logika) i stilova (CSS). Dekorator Component ih povezuje.
• Veza podataka (Data Binding): Angular obezbeđuje vezu između podataka u klasi komponente i prikaza u šablonu. Postoje jednostruka (property binding, interpolation) i dvostruka veza podataka (ngModel).
• Direktive: Menjaju ponašanje ili izgled elemenata DOM-a. Postoje strukturne (*ngIf, *ngFor) i atributne (ngClass, ngStyle).
• Servisi: Klase koje sadrže logiku koja može biti korišćena od strane više komponenti. Koriste se za dobijanje podataka, poslovnu logiku itd.
• Umetanje zavisnosti (Dependency Injection): Mehanizam putem kojeg Angular pruža servise komponentama ili drugim servisima. Čini kod fleksibilnijim i lakšim za testiranje.
• Routing: Omogućava navigaciju između različitih prikaza (komponenti) aplikacije bez osvežavanja stranice. Definiše se pomoću RouterModule i konfiguracije ruta.
• Životni ciklus komponente: Serija događaja koja se dešava od kreiranja do uništenja komponente. Angular pruža hook-ove (metode) koje se mogu implementirati za izvršavanje akcija u određenim fazama (ngOnInit, ngOnDestroy).
• Detekcija promena (Change Detection): Mehanizam koji određuje kada je potrebno osvežiti prikaz (DOM) na osnovu promena u podacima aplikacije. Angular koristi zone (NgZone) za praćenje asinhronih događaja i automatsko pokretanje detekcije promena.
• Šabloni (Templates): HTML sa Angular proširenjima za vezivanje podataka, direktive i izraze.
• RxJS: Angular aktivno koristi biblioteku RxJS za rad sa asinhronim podacima i tokovima događaja.

Proces rada na visokom nivou:

1. Učitavanje: Pregledač učitava index.html.
2. Start: Pokreće se korenski deo aplikacije, obično u main.ts.
3. Bootstrapping: @NgModule za korenski modul (obično AppModule) se učitava pomoću platform-browser.
4. Renderovanje: Angular kreira i renderuje komponente, počevši od korenskog.
5. Veza podataka: Podaci iz klasa komponenti se povezuju sa šablonima.
6. Detekcija promena: Angular prati promene podataka i osvežava prikaz.
7. Routing: Prelazi između prikaza se upravljaju od strane rutera.

// Primer jednostavne komponente
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Ime taga za korišćenje u šablonu
  template: `<p>{{ message }}</p>`, // Šablon komponente
  styles: ['p { color: blue; }'] // Stilovi komponente
})
export class GreetComponent {
  // Logika komponente
  message = 'Zdravo od Angular!';
}

// Primer korišćenja servisa sa DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Servis je dostupan u korenskom injektoru
})
export class DataService {
  getData(): string {
    return 'Podaci iz servisa';
  }
}

// U komponenti koja koristi servis
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) { // Umetanje servisa
  }

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

Angular kompajlira TypeScript i HTML šablone u JavaScript tokom procesa build-a (po difoltu AOT kompilacija), što povećava performanse.