Ik had al eens een lijstje gemaakt met zaken waar ik me in wil verdiepen. Begin 2018 meteen maar in praktijk gebracht, ik begin met Angular. Dit framework (vroeger AngularJS) is (volgens de wikipedia-pagina: link) een framework voornamelijk voor 1-pagina-webapplicaties. Je hebt de HTML, met bepaalde variabelen kun je Angular koppelen en dynamisch de data laten vullen. Dit werkt 2 kanten op, wijzigingen worden ook weer teruggestuurd naar de server. Tenminste, zo lees ik het. Eerst de wikipedia-pagina doorgelezen, daarna naar de officiële website van Angular gesurft: link. Naar onderen scrollen en via Let's get started naar de tutorial, link. Ik ga beginnen!
Ik doorloop de tutorial op mijn laptop met Windows 10. Dus mocht je in Linux of in macOS werken, dan kan het iets anders werken.
Eerst nodeJS en NPM installeren (zitten beide in 1 installer) via deze link. Dat werkt. Vervolgens als administrator in de command-prompt het volgende statement uitgevoerd:
npm install -g @angular/cli
In je terminal krijg je een [......] met tekst te zien, die punten moeten vervangen worden met gevulde blokjes, een progress-bar. Dat kan even duren. Wat er achter de schermen gebeurd is dat de code uit het Github-project opgevraagd wordt: link. Ik volg nu de standaardstappen, maar je kunt dus ook zelf het GIT-project klonen en met npm link als basis van de code gebruikt wordt. Misschien een idee om later te gaan doen, omdat ik eigenlijk mijn C-schijf niet al teveel wil vullen, in mijn laptop zit een kleine USB-stick waar ik eigenlijk de programma's en data op wil zetten. Onder water lijkt echter de boel geïnstalleerd te worden op \AppData\Roaming\npm\node_modules\...., dus ik schiet er waarschijnlijk niet zoveel mee op. Daarom maar gewoon de stappen volgen zoals ze ook in de tutorial staan :)
De installatie is klaar. We kunnen een nieuw project aanmaken. Daarvoor ga ik in de terminal wel naar mijn USB-stick en voer ik het onderstaande commando uit:
ng new my-app
Er staat al onder dat je geduld moet hebben omdat er vooral veel NPM packages geïnstalleerd moeten worden. Omdat ik tussentijds naar de Rijdende Rechter ga kijken laat ik dit proces doorlopen. Na afloop zie ik dat er 1166 packages geïnstalleerd zijn in 1413 seconden.
Hierna voer ik deze commando's uit:
cd my-app
ng serve --open
De server start op, de browser opent localhost poort 4200 en ik krijg de pagina te zien. Het werkt! Aanpassingen die je vervolgens doorvoert worden real-time bijgewerkt in je browser. Hierna nog even het overzicht van de mappen en bestanden bekeken.
Dat was de eerste oefening, de volgende keer door met de tutorial.