Voordat u begint met de ontwikkeling 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.

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

Als 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

Om Angular CLI te installeren, 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, controleer de versie van Angular CLI 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 uw 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. U kunt ook Angular Essentials installeren om syntaxis-ondersteuning, autocompletion en andere hulpmiddelen toe te voegen voor eenvoudigere Angular-ontwikkeling in VS Code.