Filer i app-mappen

Før vi går inn på hovedkomponenten, skal vi se på filene som finnes i app-mappen og deres roller i applikasjonen.

Når du oppretter et nytt Angular-prosjekt, starter alt i app-mappen. Dette er stedet hvor kjernefilene som definerer strukturen til applikasjonen din lagres. I denne delen skal vi utforske hva som finnes i denne mappen og se nærmere på hovedkomponenten, som fungerer som inngangspunkt til brukergrensesnittet.

Hovedkomponent

Nå skal vi se nærmere på hovedkomponenten, AppComponent. Denne komponenten opprettes som standard når du kjører kommandoen ng new, og fungerer som rotkomponenten i applikasjonen.

I Angular opprettes komponenter ved hjelp av dekoratører. En dekoratør er en spesiell funksjon som legger til ekstra funksjonalitet til en klasse.

Innenfor @Component-dekoratøren angir vi viktige innstillinger som bestemmer hvordan komponenten skal se ut og oppføre seg. La oss se nærmere på disse:

Nøkkel­elementer i app.component.ts-filen:

• Selector (selector) – definerer hvordan komponenten skal navngis i HTML. I dette tilfellet kan den brukes som <app-root></app-root>;

• Imports (imports) – en liste over avhengigheter som kreves for at komponenten skal fungere. I dette eksemplet brukes RouterOutlet, som håndterer visning av innhold basert på rute;

• Template (templateUrl) – banen til HTML-filen (app.component.html) som inneholder komponentens mal;

• Styles (styleUrls) – banen til CSS-filen (app.component.css) som definerer komponentens utseende.

Hvordan hovedkomponenten brukes

Prosessen starter i index.html-filen som ligger i src-mappen. Den inneholder ikke typisk innhold, kun en grunnleggende struktur med én spesiell tag:

Denne <app-root>-taggen tilsvarer selector i app.component.ts. Når Angular initialiseres, finner den denne taggen og erstatter den med innholdet fra app.component.html.

Konklusjon

Hovedkomponenten er hjertet i applikasjonen. Den lastes inn først og håndterer kjerne-templaten. Alt vi ser på skjermen går gjennom denne. <app-root>-taggen i index.html er inngangspunktet hvor Angular "går inn" på siden.