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): Angular кеңейтүүлөрү менен HTML, маалыматтарды байлоо, директивалар жана билдирүүлөр.
• 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 компиляциясы боюнча алдын ала конфигурацияланган), бул өндүрүмдүүлүктү жогорулатат.