როგორ მუშაობს Angular?

Angular MVC/MVVM არქიტექტურაზეა დაფუძნებული. ის იყენებს კომპონენტებს, მონაცემთა ბმულს და დამოკიდებულებების ინექციას ინტერფეისის შექმნისთვის.

ძირითადი კონცეფციები:

• კომპონენტები: აპლიკაციის მშენებლობის ბლოკები, რომლებიც შედგება შაბლონიდან, კლასიდან და სტილებიდან.
• მოდულები (NgModules): აერთიანებს დაკავშირებულ კომპონენტებს, სერვისებს და სხვა ელემენტებს.
• მონაცემთა ბმული: სინქრონიზებს მონაცემებს მოდელის და წარმოდგენის შორის.
  • ერთმხრივი ბმული: მონაცემები მიედინება ერთ მიმართულებით (მაგალითად, მოდელიდან წარმოდგენამდე).
  • ორმხრივი ბმული [()]: ცვლილებები მოდელში გავლენას ახდენს წარმოდგენაზე და პირიქით.
• სერვისები: უზრუნველყოფს ფუნქციონალობას, რომელიც შეიძლება გამოყენებულ იქნას სხვადასხვა კომპონენტში (მაგალითად, HTTP მოთხოვნებთან მუშაობა).
• დამოკიდებულებების ინექცია (DI): მექანიზმი, რომელიც უზრუნველყოფს დამოკიდებულებების მიწოდებას (მაგალითად, სერვისები) კომპონენტებს.
• შაბლონები: HTML-ის გაფართოებები Angular სინტაქსით, მონაცემების ჩვენებისა და მოვლენის დამუშავებისთვის.
• Direktირებები: ცვლის DOM ელემენტების ქცევას ან გარეგნობას.
  • სტრუქტურული: დამატება, წაშლა ან მართვა DOM ელემენტების (მაგალითად, *ngIf, *ngFor).
  • Attributes: ცვლის არსებული ელემენტის გარეგნობას ან ქცევას (მაგალითად, [ngClass], [ngStyle]).
• კომპონენტების სიცოცხლის ციკლი: ხლიკების ნაკრები, რომელიც საშუალებას აძლევს კოდის შესრულებას კომპონენტის ცხოვრების სხვადასხვა ეტაპზე (მაგალითად, OnInit, OnDestroy).
• NgZone: უზრუნველყოფს ავტომატურ ცვლილებების აღმოჩენას და წარმოდგენის განახლებას ასინქრონული ოპერაციების დროს.

სამუშაო პროცესი:

1. ჩატვირთვა: აპლიკაცია იტვირთება, Bootstrap მოდული იწყებს ძირითადი კომპონენტის გაშვებას.
2. რენდერობა: Angular კოდის შაბლონებს და კომპილირებს და ქმნის DOM-ის სტრუქტურას.
3. მონაცემთა ბმული: მონაცემებს და წარმოდგენას შორის კავშირი დამყარდება.
4. მოვლენების დამუშავება: მოვლენის მიმღებები რეაგირებენ მომხმარებლის მოქმედებებზე.
5. ცვლილებების აღმოჩენა: ზონა აკვირდება ასინქრონულ ოპერაციებს.
6. მოდელის განახლება: ცვლილებების აღმოჩენისას Angular განაახლებს შესაბამის ნაწილებს DOM-ის.

ორმხრივი ბმულის მაგალითი:

<!-- შაბლონში -->
<input [(ngModel)]="userName">
<p>გამარჯობა, {{ userName }}!</p>

// კომპონენტის კლასში
export class MyComponent {
  userName: string = '';
}