Cum funcționează Angular?

Angular funcționează ca un cadru pentru crearea aplicațiilor de tip single-page (SPA). Componentele și principiile sale cheie:

• Modularitate: Aplicațiile sunt construite din module. @NgModule definește ce componente, servicii și alte elemente aparțin unui modul.
• Componente: Blocurile de construcție principale ale aplicațiilor Angular. Fiecare componentă constă dintr-un șablon (HTML), o clasă TypeScript (logică) și stiluri (CSS). Decoratorul Component le leagă împreună.
• Legarea datelor (Data Binding): Angular asigură legătura între datele din clasa componentei și reprezentarea din șablon. Există legare unidirecțională (property binding, interpolation) și bidirecțională (ngModel).
• Directive: Schimbă comportamentul sau aspectul elementelor DOM. Sunt structurale (*ngIf, *ngFor) și atributive (ngClass, ngStyle).
• Servicii: Clase care conțin logică ce poate fi utilizată de mai multe componente. Sunt folosite pentru obținerea datelor, logica de business etc.
• Injectarea dependențelor (Dependency Injection): Mecanism prin care Angular furnizează servicii componentelor sau altor servicii. Face codul mai flexibil și testabil.
• Routing: Permite navigarea între diferite reprezentări (componente) ale aplicației fără reîncărcarea paginii. Este definit cu RouterModule și configurația rutelor.
• Ciclul de viață al componentei: O serie de evenimente care au loc de la crearea până la distrugerea unei componente. Angular oferă hook-uri (metode) pe care le poți implementa pentru a executa acțiuni în anumite etape (ngOnInit, ngOnDestroy).
• Detecția schimbărilor (Change Detection): Mecanism care determină când trebuie actualizată reprezentarea (DOM) pe baza modificărilor din datele aplicației. Angular folosește zone (NgZone) pentru a urmări evenimentele asincrone și a porni automat detecția schimbărilor.
• Șabloane (Templates): HTML cu extensii Angular pentru legarea datelor, directive și expresii.
• RxJS: Angular utilizează activ biblioteca RxJS pentru lucrul cu date asincrone și fluxuri de evenimente.

Procesul de lucru la nivel înalt:

1. Încărcare: Browserul încarcă index.html.
2. Pornire: Se pornește rădăcina aplicației, de obicei în main.ts.
3. Bootstrapping: @NgModule pentru modulul rădăcină (de obicei AppModule) se încarcă cu platform-browser.
4. Renderizare: Angular creează și redă componentele, începând cu rădăcina.
5. Legarea datelor: Datele din clasele componentelor sunt legate de șabloane.
6. Detecția schimbărilor: Angular monitorizează modificările datelor și actualizează reprezentarea.
7. Routing: Tranzițiile între reprezentări sunt gestionate de router.

// Exemplu de componentă simplă
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Numele tag-ului pentru utilizare în șablon
  template: `<p>{{ message }}</p>`, // Șablonul componentei
  styles: ['p { color: blue; }'] // Stilurile componentei
})
export class GreetComponent {
  // Logica componentei
  message = 'Salut din Angular!';
}

// Exemplu de utilizare a unui serviciu cu DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Serviciul este disponibil în injectorul rădăcină
})
export class DataService {
  getData(): string {
    return 'Date din serviciu';
  }
}

// În componenta care utilizează serviciul
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) { // Injectarea serviciului
  }

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

Angular compilează TypeScript și șabloanele HTML în JavaScript în timpul procesului de build (compilare AOT implicit), ceea ce crește performanța.