Bestanden in de app-map

Voordat we ingaan op het hoofdcomponent, bekijken we de bestanden in de app-map en hun rol binnen de applicatie.

Wanneer je een nieuw Angular-project aanmaakt, begint alles in de app-map. Hier worden de kernbestanden opgeslagen die de structuur van je applicatie bepalen. In deze sectie bekijken we wat er in deze map staat en nemen we het hoofdcomponent onder de loep, dat fungeert als het toegangspunt tot de gebruikersinterface.

Hoofdcomponent

Nu bekijken we het hoofdcomponent, AppComponent, van dichterbij. Dit component wordt standaard aangemaakt bij het uitvoeren van het ng new-commando en fungeert als het rootcomponent van de applicatie.

In Angular worden componenten gemaakt met behulp van decorators. Een decorator is een speciale functie die extra functionaliteit toevoegt aan een klasse.

Binnen de @Component decorator specificeren we belangrijke instellingen die bepalen hoe de component eruitziet en zich gedraagt. Laten we deze onderdelen toelichten:

Belangrijke elementen in het bestand app.component.ts:

• Selector (selector) – bepaalt hoe de component wordt genoemd in de HTML. In dit geval kan deze worden gebruikt als <app-root></app-root>;

• Imports (imports) – een lijst van afhankelijkheden die nodig zijn voor het functioneren van de component. In dit voorbeeld wordt RouterOutlet gebruikt, die de inhoud weergeeft op basis van de route;

• Template (templateUrl) – het pad naar het HTML-bestand (app.component.html) dat de template van de component bevat;

• Styles (styleUrls) – het pad naar het CSS-bestand (app.component.css) dat het uiterlijk van de component bepaalt.

Hoe het hoofdcomponent wordt gebruikt

Het proces begint in het index.html-bestand in de map src. Dit bestand bevat geen typische inhoud, alleen een basisstructuur met één speciaal element:

Dit <app-root> element komt overeen met de selector in app.component.ts. Wanneer Angular initialiseert, vindt het dit element en vervangt het door de inhoud van app.component.html.

Conclusie

Het hoofdcomponent is het hart van de applicatie. Het wordt als eerste geladen en beheert de kernsjabloon. Alles wat op het scherm verschijnt, gaat hierdoor heen. Het <app-root> element in index.html is het toegangspunt waardoor Angular de pagina binnenkomt.