Kaip veikia Angular?

„Angular“ veikia kaip karkasas vienos puslapio programoms (SPA) kurti. Jo pagrindiniai komponentai ir principai:

• Moduliškumas: Programos sudaromos iš modulių. @NgModule nustato, kurie komponentai, paslaugos ir kiti elementai priklauso moduliui.
• Komponentai: Pagrindiniai Angular programų statybiniai blokai. Kiekvienas komponentas susideda iš šablono (HTML), TypeScript klasės (logika) ir stilių (CSS). Component dekoratorius juos sujungia.
• Duomenų ryšys (Data Binding): Angular užtikrina ryšį tarp duomenų klasėje ir šablone. Yra vienpusiai (property binding, interpolation) ir dvipusiai duomenų ryšiai (ngModel).
• Direktyvos: Keičia DOM elementų elgseną ar išvaizdą. Yra struktūrinės (*ngIf, *ngFor) ir atributinės (ngClass, ngStyle).
• Paslaugos: Klasės, turinčios logiką, kuri gali būti naudojama keliuose komponentuose. Naudojamos duomenų gavimui, verslo logikai ir kt.
• Priklausomybės injekcija (Dependency Injection): mechanizmas, leidžiantis Angular teikti paslaugas komponentams ar kitoms paslaugoms. Tai daro kodą lankstesnį ir testuojamą.
• Maršrutizacija (Routing): leidžia naršyti tarp skirtingų vaizdų (komponentų) be puslapio perkrovimo. Nustatoma naudojant RouterModule ir maršrutų konfigūraciją.
• Komponento gyvavimo ciklas (Component Lifecycle): įvykiai, vykstantys nuo komponento sukūrimo iki sunaikinimo. Angular siūlo kablius (metodus), kuriuos galima įgyvendinti tam tikrose stadijose (pvz., ngOnInit, ngOnDestroy).
• Pakeitimų aptikimas (Change Detection): mechanizmas, kuris nustato, kada reikia atnaujinti vaizdą (DOM) remiantis duomenų pokyčiais. Angular naudoja zonas (NgZone) stebėti asinchroninius įvykius ir automatiškai paleisti pakeitimų aptikimą.
• Šablonai (Templates): HTML su Angular išplėtimis duomenų ryšio, direktyvų ir išraiškų naudojimui.
• RxJS: Angular aktyviai naudoja RxJS biblioteką darbui su asinchroniniais duomenimis ir įvykių srautais.

Aukšto lygio darbo procesas:

1. Įkėlimas: Naršyklė įkelia index.html.
2. Pradžia: Pradedama pagrindinė programos dalis, dažniausiai esanti main.ts.
3. Bootstrap: @NgModule įkeliamas iš pagrindinio modulio (AppModule) naudojant platform-browser.
4. Renderavimas: Angular kuria ir atvaizduoja komponentus, pradedant nuo pagrindinio.
5. Duomenų ryšys: Duomenys iš komponento klasių susiejami su šablonais.
6. Pakeitimų aptikimas: Angular stebi duomenų pokyčius ir atnaujina vaizdą.
7. Maršrutizacija: Perėjimai tarp vaizdų vyksta per routerį.

// Paprasto komponento pavyzdys
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Žymės pavadinimas šablone
  template: `<p>{{ message }}</p>`, // Komponento šablonas
  styles: ['p { color: blue; }'] // Komponento stiliai
})
export class GreetComponent {
  // Komponento logika
  message = 'Sveiki iš Angular!';
}

// Paslaugos naudojimo pavyzdys DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Paslauga prieinama pagrindiniame injektoriuje
})
export class DataService {
  getData(): string {
    return 'Duomenys iš paslaugos';
  }
}

// Komponente, kuri naudoja paslaugą
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) { // Paslaugos injekcija
  }

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

Angular kompiliuoja TypeScript ir HTML šablonus į JavaScript'ą proceso metu (AOT kompiliacija pagal numatytuosius nustatymus), kas didina našumą.