Mkabala wa Angular ni nini?

Question

Accepted Answer

**Mkabala** ni kizuizi cha msingi cha Angular UI — **darasa** la TypeScript lililoezwa kwa `@Component` ambalo linakabidhi sehemu ya skrini ("mwonekano" wake). Kila programu ya Angular ni mti wa vikabala. ## Muundo wa mkabala ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` Kizazi `@Component` kinaunganisha mambo matatu: **selector** (jinsi unavyoitumia katika HTML), **hadithi** (alama), na **mitindo** (iryokuwa kwa mkabala huu). ## Darasa lina mantiki na data ```html

``` Malum na njia za hadharani za darasa yanaweza kupitikana moja kwa moja katika hadithi yake kupitia kumfunga — hii ndio moyo wa jinsi Angular inaunganisha data na mwonekano. ## Kutumia mkabala ```html ``` ## Mitindo ni iliyokapsuliwa kwa chaguo-msingi ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular inayumba mitindo ya mkabala kiotomatiki (View Encapsulation), kwa hivyo CSS haisiki kati ya vikabala. ## Kwa nini inashangilia Vikabala ndivyo unavyomuundo kila programu ya Angular — vitengo vya kujitegemea vya hadithi + mantiki + mitindo iliyobatilishwa, iliyotunga katika mti. Kuelewa kizazi cha `@Component` (selector, hadithi, mitindo) na jinsi malum/njia za darasa yanaunganishwa na hadithi ni msingi kamili wa ukuzaji wa Angular; kila kitu kingine kinajengwa juu ya mfano wa mkabala.