Ինչպես է աշխատում Angular-ը?

Angular-ը աշխատում է որպես ֆրեյմվորկ՝ մեկ էջից բաղկացած հավելվածներ (SPA) ստեղծելու համար: Նրա հիմնական բաղադրիչներն ու սկզբունքները՝

• Մոդուլայնություն: Հավելվածները կառուցվում են մոդուլներից: @NgModule-ը որոշում է, թե որ կոմպոնենտները, ծառայությունները և այլ տարրեր պատկանում են մոդուլին:
• Կոմպոնենտներ: Angular հավելվածների հիմնական շինանյութերը: Յուրաքանչյուր կոմպոնենտ բաղկացած է շաբլոնից (HTML), TypeScript դասից (լոգիկա) և ոճերից (CSS): Component դեկորատորը կապում է դրանք:
• Տվյալների կապակցում (Data Binding): Angular-ը ապահովում է կապ տվյալների դասում և ներկայացման մեջ: Կան միակողմանի (property binding, interpolation) և երկկողմանի տվյալների կապ (ngModel):
• Ներածականներ: Դրանք փոխում են DOM տարրերի վարքագիծը կամ տեսքը: Կան կառուցվածքային (*ngIf, *ngFor) և ատրիբուտային (ngClass, ngStyle):
• Ծառայություններ: Դասեր, որոնք պարունակում են լոգիկա, որը կարող է օգտագործվել մի քանի կոմպոնենտների կողմից: Օգտագործվում են տվյալների ստացման, բիզնես-լոգիկայի և այլն:
• Անհատականության ներդրում (Dependency Injection): մեխանիզմ, որի միջոցով Angular-ը տրամադրում է ծառայություններ կոմպոնենտներին կամ այլ ծառայություններին: Սա դարձնում է կոդը ավելի ճկուն և թեստավորվող:
• Ռոուտինգ (Routing): թույլ է տալիս նավիգացնել տարբեր ներկայացումների (կոմպոնենտների) միջև առանց էջի վերաթողարկման: Կարգավորվում է RouterModule-ով և երթուղիների կոնֆիգուրացիայով:
• Կոմպոնենտի կյանքի ցիկլը (Component Lifecycle): իրադարձությունների շարք, որոնք տեղի են ունենում կոմպոնենտի ստեղծումից մինչև ոչնչացում: Angular-ը տրամադրում է հուկեր (մեթոդներ), որոնք կարելի է իրականացնել որոշ փուլերում (օրինակ, ngOnInit, ngOnDestroy):
• Փոփոխությունների հայտնաբերում (Change Detection): մեխանիզմ, որը որոշում է, երբ պետք է թարմացնել ներկայացումը (DOM)-ը՝ հիմնվելով տվյալների փոփոխությունների վրա: Angular-ը օգտագործում է գոտիներ (NgZone)՝ հետևելու համար ասինխրոն իրադարձություններին և ավտոմատ կերպով սկսելու փոփոխությունների հայտնաբերում:
• Շաբլոններ (Templates): HTML Angular ընդարձակումներով՝ տվյալների կապակցում, ուղղորդումներ և արտահայտություններ:
• RxJS: Angular-ը ակտիվորեն օգտագործում է RxJS գրադարանը՝ ասինխրոն տվյալների և իրադարձությունների հոսքերի հետ աշխատելու համար:

Աշխատանքի բարձր մակարդակի գործընթացը՝

1. Բեռնավորում: Բրաուզերը բեռնում է index.html-ը:
2. Սկսում: Սկսվում է հավելվածի հիմնական մասը, որը սովորաբար գտնվում է main.ts-ում:
3. Բուտստրապ: @NgModule-ը բեռնվում է հիմնական մոդուլից (սովորաբար AppModule)՝ platform-browser-ի միջոցով:
4. Ռենդերինգ: Angular-ը ստեղծում և ռենդեր է անում կոմպոնենտները՝ սկսած հիմնականից:
5. Տվյալների կապակցում: Տվյալները կոմպոնենտների դասերից կապվում են շաբլոնների հետ:
6. Փոփոխությունների հայտնաբերում: Angular-ը հետևում է տվյալների փոփոխություններին և թարմացնում ներկայացումը:
7. Ռոուտինգ: Միջնորդները կառավարում են ներկայացումների միջև անցումները:

// Պարզ օրինակ կոմպոնենտի
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Տեգի անունը, որը օգտագործվում է շաբլոնում
  template: `<p>{{ message }}</p>`, // Կոմպոնենտի շաբլոն
  styles: ['p { color: blue; }'] // Կոմպոնենտի ոճերը
})
export class GreetComponent {
  // Կոմպոնենտի լոգիկա
  message = 'Բարև Angular-ից!';
}

// Օրինակ ծառայության օգտագործում DI-ով
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Ծառայությունը հասանելի է հիմնական ինժեկտորում
})
export class DataService {
  getData(): string {
    return 'Տվյալներ ծառայությունից';
  }
}

// Կոմպոնենտում, որը օգտագործում է ծառայությունը
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) { // Ծառայության ներդրում
  }

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

Angular-ը TypeScript և HTML շաբլոնները կոմպիլացնում է JavaScript-ով՝ հավաքման ժամանակ (AOT կոմպիլյացիա՝ ըստ նախնական կարգավորումների), ինչը բարձրացնում է արտադրողականությունը։