Pääkomponentti Angularissa
Tiedostot app-kansiossa
Ennen kuin syvennytään pääkomponenttiin, käydään läpi app-kansiosta löytyvät tiedostot ja niiden roolit sovelluksessa.
Kun luot uuden Angular-projektin, kaikki alkaa app-kansiosta. Täällä sijaitsevat ydintiedostot, jotka määrittelevät sovelluksesi rakenteen. Tässä osiossa tarkastellaan, mitä tämä kansio sisältää, ja tutustutaan tarkemmin pääkomponenttiin, joka toimii käyttöliittymän aloituspisteenä.
Pääkomponentti
Seuraavaksi tarkastellaan tarkemmin pääkomponenttia, AppComponent. Tämä komponentti luodaan oletuksena, kun suoritetaan ng new -komento, ja se toimii sovelluksen juurikomponenttina.
component.ts
Angularissa komponentit luodaan käyttämällä dekoraattoreita. Dekoraattori on erityinen funktio, joka lisää lisätoiminnallisuuksia luokkaan.
@Component-dekoraattorin sisällä määritellään tärkeät asetukset, jotka vaikuttavat siihen, miltä komponentti näyttää ja miten se toimii. Tarkastellaan näitä tarkemmin:
Keskeiset elementit app.component.ts-tiedostossa:
-
Selector (
selector) – määrittää, millä nimellä komponenttia käytetään HTML:ssä. Tässä tapauksessa sitä voidaan käyttää muodossa<app-root></app-root>; -
Imports (
imports) – luettelo riippuvuuksista, joita komponentti tarvitsee toimiakseen. Tässä esimerkissä käytetäänRouterOutlet-riippuvuutta, joka huolehtii sisällön näyttämisestä reitin perusteella; -
Template (
templateUrl) – polku HTML-tiedostoon (app.component.html), joka sisältää komponentin mallin; -
Styles (
styleUrls) – polku CSS-tiedostoon (app.component.css), joka määrittää komponentin ulkoasun.
Kuinka pääkomponenttia käytetään
Prosessi alkaa index.html-tiedostosta, joka sijaitsee src-kansiossa. Se ei sisällä tavanomaista sisältöä, vaan ainoastaan perusrakenteen, jossa on yksi erityinen tunniste:
index.html
Tämä <app-root> tunniste vastaa selector-määritelmää tiedostossa app.component.ts. Kun Angular alustetaan, se etsii tämän tunnisteen ja korvaa sen tiedoston app.component.html sisällöllä.
Yhteenveto
Pääkomponentti on sovelluksen ydin. Se latautuu ensimmäisenä ja hallitsee ydinmallipohjaa. Kaikki, mitä näytöllä näkyy, kulkee sen kautta. <app-root> tunniste tiedostossa index.html on sisääntulokohta, jonka kautta Angular "astuu" sivulle.
1. Mitä @Component-koristelija tekee Angularissa?
2. Missä tiedostossa pääkomponentin malli sijaitsee?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain what each file in the app folder does in more detail?
What is the purpose of the @Component decorator in Angular?
How does the <app-root> tag connect to the main component?
Mahtavaa!
Completion arvosana parantunut arvoon 3.13Pääkomponentti Angularissa
Pyyhkäise näyttääksesi valikon
Tiedostot app-kansiossa
Ennen kuin syvennytään pääkomponenttiin, käydään läpi app-kansiosta löytyvät tiedostot ja niiden roolit sovelluksessa.
Kun luot uuden Angular-projektin, kaikki alkaa app-kansiosta. Täällä sijaitsevat ydintiedostot, jotka määrittelevät sovelluksesi rakenteen. Tässä osiossa tarkastellaan, mitä tämä kansio sisältää, ja tutustutaan tarkemmin pääkomponenttiin, joka toimii käyttöliittymän aloituspisteenä.
Pääkomponentti
Seuraavaksi tarkastellaan tarkemmin pääkomponenttia, AppComponent. Tämä komponentti luodaan oletuksena, kun suoritetaan ng new -komento, ja se toimii sovelluksen juurikomponenttina.
component.ts
Angularissa komponentit luodaan käyttämällä dekoraattoreita. Dekoraattori on erityinen funktio, joka lisää lisätoiminnallisuuksia luokkaan.
@Component-dekoraattorin sisällä määritellään tärkeät asetukset, jotka vaikuttavat siihen, miltä komponentti näyttää ja miten se toimii. Tarkastellaan näitä tarkemmin:
Keskeiset elementit app.component.ts-tiedostossa:
-
Selector (
selector) – määrittää, millä nimellä komponenttia käytetään HTML:ssä. Tässä tapauksessa sitä voidaan käyttää muodossa<app-root></app-root>; -
Imports (
imports) – luettelo riippuvuuksista, joita komponentti tarvitsee toimiakseen. Tässä esimerkissä käytetäänRouterOutlet-riippuvuutta, joka huolehtii sisällön näyttämisestä reitin perusteella; -
Template (
templateUrl) – polku HTML-tiedostoon (app.component.html), joka sisältää komponentin mallin; -
Styles (
styleUrls) – polku CSS-tiedostoon (app.component.css), joka määrittää komponentin ulkoasun.
Kuinka pääkomponenttia käytetään
Prosessi alkaa index.html-tiedostosta, joka sijaitsee src-kansiossa. Se ei sisällä tavanomaista sisältöä, vaan ainoastaan perusrakenteen, jossa on yksi erityinen tunniste:
index.html
Tämä <app-root> tunniste vastaa selector-määritelmää tiedostossa app.component.ts. Kun Angular alustetaan, se etsii tämän tunnisteen ja korvaa sen tiedoston app.component.html sisällöllä.
Yhteenveto
Pääkomponentti on sovelluksen ydin. Se latautuu ensimmäisenä ja hallitsee ydinmallipohjaa. Kaikki, mitä näytöllä näkyy, kulkee sen kautta. <app-root> tunniste tiedostossa index.html on sisääntulokohta, jonka kautta Angular "astuu" sivulle.
1. Mitä @Component-koristelija tekee Angularissa?
2. Missä tiedostossa pääkomponentin malli sijaitsee?
Kiitos palautteestasi!
