Filer i app-mappen

Innan vi går in på huvudkomponenten, går vi 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 tittar vi närmare på huvudkomponenten, AppComponent. Denna komponent skapas som standard när du kör kommandot ng new och 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.

Inom @Component-dekoreraren anger vi viktiga inställningar som bestämmer hur komponenten kommer att se ut och fungera. Låt oss gå igenom dem:

Nyckelelement i filen app.component.ts:

• Selector (selector) – definierar hur komponenten kommer att 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 vi ser på skärmen passerar genom den. <app-root> taggen i index.html är ingångspunkten genom vilken Angular "går in" på sidan.