Filer i app-mappen

Innan vi går in på huvudkomponenten, låt oss gå igenom filerna som finns i app-mappen och deras roller i applikationen.

När du skapar ett nytt Angular-projekt börjar allt i app-mappen. Här lagras kärnfilerna som definierar strukturen för din applikation. I detta avsnitt utforskar vi vad som finns i denna mapp och tittar närmare på huvudkomponenten, som fungerar som ingångspunkt till användargränssnittet.

Huvudkomponent

Nu ska vi titta närmare på huvudkomponenten, AppComponent. Denna komponent skapas som standard när du kör kommandot ng new, och den fungerar som rotkomponenten i applikationen.

I Angular skapas komponenter med hjälp av dekorerare. En dekorerare är en speciell funktion som lägger till extra funktionalitet till en klass.

Inuti @Component-dekoreraren anger vi viktiga inställningar som bestämmer hur komponenten kommer att se ut och fungera. Här är en genomgång:

Viktiga element i filen app.component.ts:

• Selector (selector) – definierar hur komponenten namnges i HTML. I detta fall kan den användas som <app-root></app-root>;

• Imports (imports) – en lista över beroenden som krävs för att komponenten ska fungera. I detta exempel används RouterOutlet, som hanterar visning av innehåll baserat på rutt;

• Template (templateUrl) – sökvägen till HTML-filen (app.component.html) som innehåller komponentens mall;

• Styles (styleUrls) – sökvägen till CSS-filen (app.component.css) som definierar komponentens utseende.

Hur huvudkomponenten används

Processen börjar i filen index.html som finns i mappen src. Den innehåller inte typiskt innehåll, endast en grundläggande struktur med en speciell tagg:

Denna <app-root> tagg motsvarar selector i app.component.ts. När Angular initieras hittar den denna tagg och ersätter den med innehållet från app.component.html.

Slutsats

Huvudkomponenten är hjärtat i applikationen. Den laddas först och hanterar huvudmallen. Allt som visas på skärmen passerar genom den. <app-root> taggen i index.html är ingångspunkten genom vilken Angular "går in" på sidan.