Kickstart een AngularJS project

Kickstart een AngularJS project

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

Lees ook

How I added my Porsche EV to Homekit

Since my childhood, I have been passionate about cars and everything related to them. Even at a young age, I knew every model. I spent hours flipping through car magazines searching for new facts and always dreamed of owning an exotic car. Initially, I used to dream of owning a Ferrari, but as I grew older and wiser,…

Reading time: 12 minutes

Continue reading

CSS-only Carousel Slider

As a frontend developer, my days are primarily filled with crafting JavaScript-based components using frameworks like Vue, React, or Angular. These frameworks excel at empowering me to create reusable frontend elements, whether it's buttons, modals, links, or accordions. However, as I reflect on my reliance on these…

Reading time: 4 minutes

Continue reading

Homekit `Power consumption` sensor

Recently, I purchased a HomeWizard Wi-Fi P1 Meter. This device provides me with insights into the electricity and gas usage in my home. With 4 solar panels installed, I anticipate generating excess electricity during the spring and summer months. Despite knowing the capacity of the panels, I am unsure of the exact…

Reading time: 7 minutes

Continue reading