Voordat u begint met ontwikkelen met Angular, moet u uw werkomgeving instellen. Hiervoor zijn drie essentiële tools nodig: Node.js, Angular CLI en VS Code.

Node.js installeren

1. Ga naar de officiële Node.js website;

2. Gebruik de LTS (Long-Term Support) versie van Node.js in plaats van de nieuwste release, omdat Angular mogelijk nog niet volledig compatibel is met de nieuwste versie.

3. Selecteer uw besturingssysteem—ik kies macOS, maar kies degene die overeenkomt met uw systeem. Laat de andere instellingen ongewijzigd;

4. Download de installer en volg de instructies op het scherm om de installatie te voltooien.

Na installatie, open de terminal (of opdrachtprompt) en controleer of Node.js is geïnstalleerd:

Indien alles correct is ingesteld, zal dit commando de geïnstalleerde Node.js-versie weergeven.

Controleer vervolgens of npm (Node Package Manager) is geïnstalleerd:

Het uitvoeren van npm -v toont de geïnstalleerde versie van npm — een indicatie dat het correct is geïnstalleerd en klaar is voor gebruik.

Angular CLI installeren

Voor het installeren van Angular CLI eerst de terminal (of opdrachtprompt) openen. Vervolgens het onderstaande commando uitvoeren om Angular CLI globaal te installeren:

Met dit commando wordt Angular CLI wereldwijd op uw systeem geïnstalleerd, zodat het beschikbaar is voor elk Angular-project.

Zodra de installatie is voltooid, de versie van Angular CLI controleren door het volgende uit te voeren:

Hiermee wordt de versie-informatie van Angular CLI en andere geïnstalleerde afhankelijkheden weergegeven.

VS Code installeren

1. Ga naar de officiële VS Code website;

2. Kies de versie voor het besturingssysteem (Windows, macOS of Linux);

3. Download het installatieprogramma en volg de instructies op het scherm om de installatie te voltooien.

Na de installatie opent u VS Code en configureert u de benodigde extensies:

1. Ga naar de Extensies-sectie (Ctrl + Shift + X op Windows of Cmd + Shift + X op macOS);

2. Installeer de Angular Language Service extensie voor code-highlighting en autocompletion;

3. Optioneel kan Angular Essentials worden geïnstalleerd voor syntaxis-ondersteuning, autocompletion en aanvullende hulpmiddelen voor efficiëntere Angular-ontwikkeling in VS Code.