Filer i app-mappen

Før vi dykker ned i hovedkomponenten, gennemgår vi filerne i app-mappen og deres roller i applikationen.

Når du opretter et nyt Angular-projekt, starter alt i app-mappen. Her opbevares de kernefiler, der definerer strukturen af din applikation. I dette afsnit undersøger vi, hvad der findes i denne mappe, og ser nærmere på hovedkomponenten, som fungerer som indgangspunkt til brugergrænsefladen.

Hovedkomponent

Lad os nu se nærmere på hovedkomponenten, AppComponent. Denne komponent oprettes som standard, når du kører kommandoen ng new, og den fungerer som rodkomponenten i applikationen.

I Angular oprettes komponenter ved hjælp af dekoratorer. En dekorator er en særlig funktion, der tilføjer ekstra funktionalitet til en klasse.

Inden for @Component-dekoratoren angiver vi vigtige indstillinger, der bestemmer, hvordan komponenten ser ud og opfører sig. Lad os gennemgå dem:

Nøgleelementer i app.component.ts-filen:

• Selector (selector) – definerer, hvordan komponenten navngives i HTML. I dette tilfælde kan den bruges som <app-root></app-root>;

• Imports (imports) – en liste over afhængigheder, der kræves for at komponenten fungerer. I dette eksempel bruges RouterOutlet, som håndterer visning af indhold baseret på rute;

• Template (templateUrl) – stien til HTML-filen (app.component.html), der indeholder komponentens skabelon;

• Styles (styleUrls) – stien til CSS-filen (app.component.css), der definerer komponentens udseende.

Hvordan hovedkomponenten bruges

Processen starter i index.html-filen, som findes i mappen src. Den indeholder ikke typisk indhold, kun en grundlæggende struktur med én særlig tag:

Denne <app-root> tag svarer til selector i app.component.ts. Når Angular initialiseres, finder den denne tag og erstatter den med indholdet fra app.component.html.

Konklusion

Hovedkomponenten er hjertet i applikationen. Den indlæses først og styrer hovedskabelonen. Alt, hvad vi ser på skærmen, passerer gennem den. <app-root> tag i index.html er indgangspunktet, hvorigennem Angular "går ind" på siden.