Чӣ гуна Angular кор мекунад?

Angular ҳамчун як чаҳорчӯба барои эҷоди барномаҳои як саҳифа (SPA) кор мекунад. Компонентҳо ва принсипҳои асосии он:

• Модулсозӣ: Барномаҳо аз модулҳо сохта мешаванд. @NgModule муайян мекунад, ки кадом компонентҳо, хизматрасониҳо ва дигар элементҳо ба модул тааллуқ доранд.
• Компонентҳо: Блокҳои асосии сохтани барномаҳои Angular. Ҳар як компонент аз шаблон (HTML), синфи TypeScript (мантиқ) ва услубҳо (CSS) иборат аст. Декоратори Component онҳоро пайваст мекунад.
• Бандии маълумот (Data Binding): Angular пайвастагиро байни маълумот дар синфи компонент ва намоиш дар шаблон таъмин мекунад. Вай яктарафа (property binding, interpolation) ва дутарафа (ngModel) дорад.
• Директивҳо: Вайрон кардани рафтор ё намуди унсурҳои DOM. Маҳсулотҳои сохторӣ (*ngIf, *ngFor) ва атрибутӣ (ngClass, ngStyle).
• Хизматрасониҳо (Services): Синфҳо, ки мантиқро дар бар мегиранд ва метавонанд аз ҷониби чанд компонент истифода шаванд. Барои гирифтани маълумот, мантиқи бизнес ва ғайра истифода мешаванд.
• Вурудоти вобастагӣ (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. Bootstrapping: @NgModule барои модулҳои асосӣ (одатан AppModule) бо ёрии platform-browser бор карда мешавад.
4. Рендеринг: Angular компонентҳоро месозад ва аз ҷумлаи асосӣ оғоз мекунад.
5. Бандии маълумот: Маълумот аз синфҳои компонент бо шаблонҳо пайваст карда мешавад.
6. Детексияи тағирот: Angular тағиротро пайгирӣ мекунад ва намоишро навсозӣ мекунад.
7. Routing: Трансфертҳо байни намоишҳо аз ҷониби рутер идора карда мешаванд.

// Намунаи компоненти содда
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 compilation) тарҷума мекунад, ки иҷроишро беҳтар мекунад.