Wanneer je een project aanmaakt met de Angular CLI, wordt er een goed georganiseerde map- en bestandsstructuur gegenereerd. Deze structuur speelt een essentiële rol bij het organiseren van de code, waardoor ontwikkeling efficiënter en schaalbaarder wordt.

Je maakt kennis met de belangrijkste mappen en bestanden die automatisch worden aangemaakt bij het opzetten van een nieuw Angular-project.

Projectstructuur

Wanneer je het commando ng new angular-app uitvoert, genereert de Angular CLI de volgende structuur:

📂 src/ – Applicatiebroncode.

Deze map bevat de kernbestanden en configuraties die nodig zijn voor je Angular-applicatie.

Applicatiecode

Configuratiebestanden

Aanvullende bestanden

Een Angular-applicatie uitvoeren

Om je Angular-app te starten, open je eerst de terminal. In VS Code kun je deze sneltoetsen gebruiken:

• macOS: Cmd + J of Cmd + `;

• Windows: Ctrl + J of Cmd + `.

Je kunt ook via het bovenste menu naar Beeld → Terminal gaan.

Voer nu het volgende commando uit:

Dit commando compileert het project en start een lokale ontwikkelserver. Zodra het proces is voltooid, toont de terminal een bericht met een URL:

Open de URL (http://localhost:4200/) in je browser en je ziet de Angular welkomstpagina.