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 kernefilerne, der definerer strukturen for din applikation. I dette afsnit undersøger vi indholdet af denne mappe og ser nærmere på hovedkomponenten, som fungerer som indgangspunktet til brugergrænsefladen.

Hovedkomponent

Nu ser vi 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 angives vigtige indstillinger, der bestemmer, hvordan komponenten ser ud og opfører sig. Lad os gennemgå dem:

Nøgleelementer i filen app.component.ts:

• 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 anvendes 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 src-mappen. 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.