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

Angular асосан асос ёфтааст ба архитектураи MVC/MVVM. Он истифода мебарад компонентҳо, пайванди маълумот ва воридкунии вобастагиро барои сохтани барномаҳои интерактивии веб.

Концепсияҳои асосӣ:

• Компонентҳо: Блокҳои сохтмонии барнома, ки аз шаблон, синф ва услубҳо иборатанд.
• Модулҳо (NgModules): Ҳамроҳ мекунанд компонентҳо, хизматрасониҳо ва унсурҳои дигарро.
• Пайванди маълумот: Муносибати байни модел ва намоишро ҳамоҳанг мекунад.
  • Пайванди яктарафа: Маълумотҳо дар як самт ҷараён мегиранд (масалан, аз модел ба намоиш).
  • Пайванди дутарафа [()]: Тағйирот дар модел ба намоиш таъсир мерасонад ва баръакс.
• Хизматрасониҳо: Функсионалиро пешниҳод мекунанд, ки метавонанд дар компонентҳо истифода шаванд (масалан, кор бо HTTP-заворишҳо).
• Воридкунии вобастагиҳо (DI): Механизми пешниҳод кардани вобастагиҳо (масалан, хизматрасониҳо) ба компонентҳо.
• Шаблонҳо: HTML бо васеъкунии синтаксиси Angular барои намоиш додани маълумот ва кор бо ҳодисаҳо.
• Директивҳо: Вайрон кардани рафтор ё намуди унсурҳои DOM.
  • Структурӣ: Илова кардан, хориҷ кардан ё идора кардани унсурҳои DOM (масалан, *ngIf, *ngFor).
  • Атрибутӣ: Вайрон кардани намуди ё рафтори унсури мавҷуда (масалан, [ngClass], [ngStyle]).
• Ҳаёти компонентҳо: Ҷамъи хуки, ки имкон медиҳад иҷрои код дар марҳилаҳои гуногуни ҳаёти компонент.
• Зонаҳо (NgZone): Меҳварҳо барои худкор муайян кардани тағйирот ва навсозии намоиш дар вақти воқеӣ.

Раванди кор:

1. Боргирӣ: Барнома бор карда мешавад, модул Bootstrap оғоз мекунад компоненти асосӣ.
2. Рендеринг: Angular шаблонҳоро компили мекунад ва сохтори DOM-ро месозад.
3. Пайванди маълумот: пайванд байни маълумот ва намоиш барқарор мешавад.
4. Коркарди ҳодисаҳо: гӯшкунандагони ҳодисаҳо ба амалҳои корбар ҷавоб медиҳанд.
5. Муайян кардани тағйирот: Зона тағйиротҳои асинхронро пайгирӣ мекунад.
6. Навсозии намоиш: Angular дарёфти тағйиротҳоро муайян мекунад ва қисмҳои дахлдори DOM-ро навсозӣ мекунад.

Маслиҳат барои пайванди дутарафа:

<!-- Дар шаблон -->
<input [(ngModel)]="userName">
<p>Салом, {{ userName }}!</p>

// Дар синфи компонент
export class MyComponent {
  userName: string = '';
}