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 een nieuw Angular-project wordt aangemaakt, begint alles in de app-map. Hier worden de kernbestanden opgeslagen die de structuur van de applicatie bepalen. In deze sectie onderzoeken we wat er in deze map staat en bekijken we het hoofdcomponent nader, dat fungeert als het toegangspunt tot de gebruikersinterface.

Hoofdcomponent

Laten we nu het hoofdcomponent, AppComponent, nader bekijken. 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 verantwoordelijk is voor het tonen van inhoud 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 bevat geen typische inhoud, alleen een basisstructuur met één speciaal label:

Dit <app-root> label komt overeen met de selector in app.component.ts. Wanneer Angular initialiseert, vindt het dit label en vervangt het door de inhoud uit 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> label in index.html is het toegangspunt waardoor Angular de pagina "binnengaat".