Kickstart een AngularJS project

Geplaats op 22 april 2016 | Leestijd: 3 minuten

Een nieuw AngularJS project is zo gestart, je laadt AngularJS in via een CDN en je schrijft al snel de eerste controller en directive. Snel komen er meerdere classes en modules in je app en begin je moeite te krijgen met het vinden van de juiste code. Als jij de weg in een nieuw project moeilijk kunt vinden kunnen je collega's de weg waarschijnlijk ook niet vinden.

Er zijn veel artikelen geschreven hoe een AngularJS app het beste ingedeeld kan worden. Elk bedrijf of elke afdeling van een bedrijf heeft hier een andere visie op, er lijkt geen juiste indeling te zijn.

Yeoman kan hierbij helpen, er wordt een project gegenereerd die van alle gemakken is voorzien. De tool bestaat uit 3 onderdelen;

1. een scaffolding tool (Yo),
2. een build-system (Gulp of Grunt),
3. een package-manager (Bower en npm).

Yo zorgt voor de juiste indeling van de app, de build-system helpt met geautomatiseerde taken en met met bower installeer je snel extra plugins.

Yeoman installeren en gebruiken

Voordat Yeoman gebruikt kan worden moet npm op je computer geinstalleerd zijn en moet je Yeoman installeren via de npm command

    npm install –g yo

Een wizard zal starten waar je kunt kiezen voor een build-system en voor modules die je wilt installeren. Na het doorlopen van de wizard zal er een voorbeeld app worden gegenereerd die bestaat uit simpele controllers en templates. Belangrijker zijn de tests (Jasmine of ngScenario) die doe Yeoman zijn gegenereerd en de ontwikkelomgeving die voor jou zijn klaar gezet.

Voordelen Yeoman

• Neemt veel werk uit handen bij het opzetten van een nieuw project.
• Installeert een build-system die je zelf makkelijk kunt aanpassen en uitbreiden
• Gebruikt Bower en/of npm voor het installeren van modules en dependencies.
• Uitgebreide documentatie
• Niet alleen te gebruiken in combinatie met AngularJS