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

Wat is Angular CLI?

Hiermee kun je:

• Snel nieuwe projecten met een vooraf gedefinieerde structuur aanmaken;

• Componenten, services en andere projecteigenschappen genereren;

• Een ontwikkelserver starten voor testen en debuggen;

• De applicatie bouwen voor productie-implementatie.

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 gewenste naam gebruiken).

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

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

• Welk stylesheetformaat wilt u gebruiken? - dit bepaalt het type stylesheets voor uw project. Het is aan te raden om CSS te kiezen, maar u kunt de optie selecteren die het beste bij u past.

Zodra u deze opties bevestigt, zal de Angular CLI beginnen 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 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.