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 tarkastelemme, mitä kansio sisältää, ja tutustumme 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ätoiminnallisuutta luokkaan.

@Component-dekoraattorin sisällä määritellään tärkeät asetukset, jotka vaikuttavat siihen, miltä komponentti näyttää ja miten se toimii. Tarkastellaan niitä 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, joka hallitsee sisällön näyttämistä 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äärittelee 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ääritystä tiedostossa app.component.ts. Kun Angular alustaa sovelluksen, se etsii tämän tunnisteen ja korvaa sen app.component.html-tiedoston sisällöllä.

Yhteenveto

Pääkomponentti on sovelluksen ydin. Se latautuu ensimmäisenä ja hallitsee päätemplaattia. Kaikki, mitä näytöllä näkyy, kulkee sen kautta. <app-root> tunniste tiedostossa index.html toimii sisääntulopisteenä, jonka kautta Angular "astuu" sivulle.