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

Angular-ը հիմնված է MVC/MVVM ճարտարապետության վրա։ Այն օգտագործում է կոմպոնենտներ, տվյալների կապ և կախվածությունների ներդրում՝ ինտերակտիվ վեբ հավելվածներ կառուցելու համար։

Հիմնական գաղափարներ՝

• Կոմպոնենտներ: Հավելվածի կառուցվածքային բլոկներ, որոնք բաղկացած են շաբլոնից, դասից և ոճերից։
• Մոդուլներ (NgModules): Միավորում են կապված կոմպոնենտներ, ծառայություններ և այլ տարրեր։
• Տվյալների կապ: Սինխրոնիզացնում է տվյալները մոդելի և ներկայացման միջև։
  • Միակողմանի կապ: Տվյալները հոսում են մեկ ուղղությամբ (օրինակ՝ մոդելից դեպի ներկայացում):
  • Երկկողմանի կապ [()]: Փոփոխությունները մոդելում ազդում են ներկայացման վրա և հակառակը։
• Ծառայություններ: Պահանջարկներ, որոնք կարող են օգտագործվել տարբեր կոմպոնենտների կողմից (օրինակ՝ HTTP հարցումների աշխատանքը):
• Կախվածությունների ներդրում (DI): մեխանիզմ՝ կախվածությունները (օրինակ՝ ծառայությունները) տրամադրելու համար կոմպոնենտներին։
• Շաբլոններ: HTML՝ Angular սինտաքսիսի ընդլայնումներով՝ տվյալների ցուցադրման և իրադարձությունների մշակման համար։
• Ուղղագրություններ: փոխում են DOM տարրերի վարքագիծը կամ տեսքը։
  • Կառուցվածքային: ավելացնում, հեռացնում կամ կառավարում DOM տարրերը (օրինակ՝ *ngIf, *ngFor)։
  • Ատրիբուտային: փոխում է առկա տարրի տեսքը կամ վարքագիծը (օրինակ՝ [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 = '';
}