Kā darbojas Angular?

Angular darbojas kā ietvara vienas lapas lietojumprogrammu (SPA) izveidei. Tās galvenās sastāvdaļas un principi:

• Modulārisms: Lietojumprogrammas tiek būvētas no moduļiem. @NgModule nosaka, kuri komponenti, pakalpojumi un citi elementi pieder moduļiem.
• Komponenti: Galvenie Angular lietojumprogrammu būvniecības blokki. Katrs komponent ir sastādīts no šablona (HTML), TypeScript klases (loģika) un stiliem (CSS). Component dekorators tos sasaista.
• Datu saistība (Data Binding): Angular nodrošina saikni starp datiem klasē un šablonā. Ir vienvirziena (property binding, interpolation) un divvirziena (ngModel) datu saistība.
• Direktīvas: Maina DOM elementu uzvedību vai izskatu. Ir strukturālas (*ngIf, *ngFor) un atribūtu (ngClass, ngStyle).
• Pakalpojumi: Klases, kas satur loģiku, ko var izmantot vairākos komponentos. Tos izmanto datu iegūšanai, biznesa loģikai utt.
• Atkarību injekcija (Dependency Injection): mehānisms, kas ļauj Angular nodrošināt pakalpojumus komponentiem vai citām pakalpojumu klasēm. Tas padara kodu elastīgāku un testējamu.
• Maršrutēšana (Routing): ļauj pārvietoties starp dažādiem skatiem (komponentiem) bez lapas atkārtotas ielādes. To konfigurē ar RouterModule un maršrutu konfigurāciju.
• Komponenta dzīves cikls (Component Lifecycle): notikumu sērija, kas notiek no komponenta izveides līdz iznīcināšanai. Angular nodrošina cilpas (metodes), kuras var īstenot noteiktos posmos (piemēram, ngOnInit, ngOnDestroy).
• Izmaiņu noteikšana (Change Detection): mehānisms, kas nosaka, kad jāatjaunina skats (DOM), balstoties uz datu izmaiņām. Angular izmanto zonas (NgZone), lai uzraudzītu asinhronos notikumus un automātiski palaistu izmaiņu noteikšanu.
• Šabloni (Templates): HTML ar Angular paplašinājumiem datu saistīšanai, direktīvām un izteiksmēm.
• RxJS: Angular aktīvi izmanto RxJS bibliotēku ar asinhronajiem datiem un notikumu plūsmām.

Augsta līmeņa darba process:

1. Lejupielāde: Pārlūkprogramma lejupielādē index.html.
2. Sākums: Sākas lietojumprogrammas galvenā daļa, kas parasti atrodas main.ts.
3. Bootstrap: @NgModule tiek ielādēts no galvenā moduļa (AppModule) ar platform-browser palīdzību.
4. Renderēšana: Angular izveido un attēlo komponentus, sākot ar galveno.
5. Datu saistība: Dati no komponentu klasēm tiek sasaistīti ar šabloniem.
6. Izmaiņu noteikšana: Angular uzrauga datu izmaiņas un atjauno skatu.
7. Maršrutēšana: Pārejas starp skatiem tiek veikts ar routeri.

// Vienkārša komponenta piemērs
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Taga nosaukums šablonā
  template: `<p>{{ message }}</p>`, // Komponenta šablons
  styles: ['p { color: blue; }'] // Komponenta stili
})
export class GreetComponent {
  // Komponenta loģika
  message = 'Sveiki no Angular!';
}

// Pakalpojuma izmantošanas piemērs DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Pakalpojums ir pieejams galvenajā injektorlī
})
export class DataService {
  getData(): string {
    return 'Dati no pakalpojuma';
  }
}

// Komponentā, kas izmanto pakalpojumu
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) { // Pakalpojuma injekcija
  }

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

Angular kompilē TypeScript un HTML šablonus uz JavaScript procesa laikā (AOT kompilācija pēc noklusējuma), kas palielina veiktspēju.