როგორ მუშაობს 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 კომპილაცია, როგორც წესი, დაყენებულია), რაც ზრდის პროდუქტიულობას.