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.

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ään RouterOutlet-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:

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.