Kuidas töötab Angular?

Angular töötab raamistikuna ühe lehe rakenduste (SPA) loomisel. Selle põhikomponendid ja põhimõtted:

• Moodulid: Rakendused ehitatakse moodulitest. @NgModule määrab, millised komponendid, teenused ja teised elemendid kuuluvad moodulile.
• Komponendid: Angulari rakenduste põhiehitised. Iga komponent koosneb mallist (HTML), TypeScript klassist (loogika) ja stiilidest (CSS). Component dekorator ühendab need.
• Andmete sidumine (Data Binding): Angular tagab ühenduse komponendi klassi andmete ja malliga. On ühe suuna (property binding, interpolation) ja kahekordse (ngModel) sidumise võimalused.
• Direktiivid: Muudavad DOM elementide käitumist või välimust. On struktuursed (*ngIf, *ngFor) ja atribuutide (ngClass, ngStyle) tüüpi.
• Teenused: Klassid, mis sisaldavad loogikat, mida saab kasutada mitmes komponendis. Kasutatakse andmete saamiseks, äriloogika jaoks jne.
• Sõltuvuste süstimine (Dependency Injection): mehhanism, mis võimaldab Angularil pakkuda teenuseid komponentidele või teistele teenustele. Teeb koodi paindlikumaks ja testitavamaks.
• Routimine (Routing): võimaldab navigeerida erinevate vaadete (komponentide) vahel ilma lehe uuesti laadimata. Konfigureeritakse RouterModule ja marsruutide konfiguratsiooniga.
• Komponendi elutsükkel (Component Lifecycle): sündmuste seeria, mis toimub komponendi loomise ja hävitamise vahel. Angular pakub haake (meetodeid), mida saab teostada teatud etappidel (näiteks, ngOnInit, ngOnDestroy).
• Muudatuste tuvastamine (Change Detection): mehhanism, mis määrab, millal tuleb vaadet (DOM) uuendada, põhinedes andmete muutustel. Angular kasutab tsoone (NgZone), et jälgida asünkroonseid sündmusi ja automaatselt käivitada muudatuste tuvastus.
• Mallid (Templates): HTML koos Angular laiendustega andmete sidumiseks, direktiivide ja väljenditega.
• RxJS: Angular kasutab aktiivselt RxJS teeki asünkroonsete andmete ja sündmuste voogude töötlemiseks.

Tööprotsess kõrgtasemel:

1. Laadimine: Brauser laadib index.html.
2. Algus: Käivitatakse rakenduse juur, tavaliselt main.ts-st.
3. Bootstrap: @NgModule laaditakse põhimoodulist (AppModule) platform-browser abil.
4. Renderdamine: Angular loob ja renderdab komponendid, alustades juurkomponendist.
5. Andmete sidumine: Komponentide klasside andmed siduvad mallidega.
6. Muudatuste tuvastamine: Angular jälgib andmete muutusi ja uuendab vaadet.
7. Routimine: Vaadete vaheline liikumine toimub routeri kaudu.

// Näide lihtsast komponendist
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Tägina šablonis
  template: `<p>{{ message }}</p>`, // Komponendi mall
  styles: ['p { color: blue; }'] // Komponendi stiil
})
export class GreetComponent {
  // Komponendi loogika
  message = 'Tere Angularist!';
}

// Näide teenuse kasutamisest DI abil
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Teenus on saadaval põhisinjektoris
})
export class DataService {
  getData(): string {
    return 'Andmed teenusest';
  }
}

// Komponent, mis kasutab teenust
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) { // Teenuse injekteerimine
  }

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

Angular kompileerib TypeScripti ja HTML-mallid JavaScriptiks koostamise ajal (AOT kompileerimine vaikimisi), mis tõstab jõudlust.