Nu alle benodigde tools, waaronder Node.js, VS Code en Angular CLI, zijn geïnstalleerd, is het tijd om je eerste project aan te maken en te ontdekken hoe Angular CLI het ontwikkelproces vereenvoudigt.

Wat is Angular CLI?

Hiermee kun je:

• Snel nieuwe projecten aanmaken met een vooraf gedefinieerde structuur;

• Componenten, services en andere projecteigenschappen genereren;

• Een ontwikkelserver starten voor testen en debuggen;

• De applicatie bouwen voor productie-deployment.

Met Angular CLI is het niet nodig om handmatig bestanden en afhankelijkheden te configureren—alles wordt automatisch ingesteld.

Werkruimte instellen

Voordat u een nieuw project aanmaakt, kiest u een geschikte locatie op uw computer waar u uw Angular-projecten wilt opslaan.

Als u nog geen speciale map voor projecten heeft, maakt u er een aan met het volgende commando:

Dit commando maakt een nieuwe map met de naam projects aan op de opgegeven locatie.

Vervolgens navigeert u naar de nieuw aangemaakte map door het volgende uit te voeren:

Met dit commando opent u de map projects, zodat u hierin kunt werken.

Een Angular-project maken met de CLI

Om een nieuw Angular-project te maken, voert u het volgende commando uit in uw projectmap:

• ng new - het commando voor het aanmaken van een nieuw Angular-project;

• angular-app - de projectnaam (je kunt elke naam gebruiken die je wenst).

Na het uitvoeren van het commando zal de Angular CLI je een aantal instelvragen stellen:

• Wil je Angular routing toevoegen? - dit wordt later behandeld, kies voor nu Yes;

• Welke stylesheet-indeling wil je gebruiken? - dit bepaalt het type stylesheets voor je project. Het is aan te raden om CSS te kiezen, maar je kunt de optie selecteren die het beste bij je past.

Zodra je deze opties bevestigt, begint de Angular CLI met het installeren van afhankelijkheden. Dit proces kan enkele minuten duren omdat alle benodigde pakketten worden gedownload en geïnstalleerd.

Wanneer de installatie is voltooid, verschijnt er een succesbericht dat aangeeft dat het project succesvol is aangemaakt.

Nu kun je het project openen in VS Code, dat we eerder hebben geïnstalleerd.

In het volgende hoofdstuk wordt de map- en bestandsstructuur die door de Angular CLI is gegenereerd, in detail bekeken om te begrijpen hoe een Angular-project is georganiseerd en waar de belangrijkste onderdelen van je applicatie zich bevinden.