De nieuwe Groepsadmin wordt een AngularJS webapp die communiceert met een REST webservice. Voor de front-end worden volgende technologieën gebruikt.
Als CSS framework gebruiken we Twitter Bootstrap (momenteel v3.1.1). De CSS/JavaScript componenten vormen een goede basis en worden aangepast/uitgebreid waar nodig.
Indien bestaande styles overriden te omslachtig is, kan je deze blokken uitschakelen door ze in comments te zetten. Verwijder nooit de Bootstrap code. Mocht je bestaande code in aanpassen, plaats er ga-adjustment bij. Dit maakt het eenvoudiger om later nog up te daten.
Maar probeer dit te vermijden. Beter is om Bootstrap te overriden. Bestaande classes overschrijven en styles specifiek voor de Groepsadmin schrijven we in files met een ga prefix.
Wil je bijvoorbeeld classes uit forms.less overriden, doe dit dan in een file ga-forms.less.
Zo kunnen Bootstrap en Groepsadmin styles makkelijk van elkaar onderscheiden worden.
Aangezien we verder bouwen op Bootstrap is het logisch om dezelfde CSS-property volgorde te gebruiken. Meer info over de property order:
Grunt is een task runner die helpt om onze workflow te automatiseren. Introductie tot Grunt: http://24ways.org/2013/grunt-is-not-weird-and-hard
In de Gruntfile zijn momenteel 3 taken gedefiniëerd:
- Compiled automatisch LESS files naar CSS
- Genereert een Source Map (geeft de juiste filenaam en lijnnummer voor het debuggen van CSS/LESS)
- (maakt het eenvoudiger om LESS te debuggen)
Creëert een build map met alle files geoptimaliseerd (minify, concat, ..), klaar voor production. (Todo)
Start een statische webserver.
De watch task is opgenomen in grunt serve, deze hoef je dus niet nog eens apart te draaien.
LiveReload monitort wijzigingen in de bronbestanden. Zodra een aanpassing in een bestand wordt opgeslagen (en Grunt klaar is met CSS/JavaScript compilen), wordt het browservenster automatisch geüpdatet.
AngularJS is een MVC framework. Het laat ons toe om makkelijk een single-page webapp te bouwen die volledig op de client side draait.
Alle Angular functionaliteit zit in de namespace ng, om niet in het vaarwater te komen van (toekomstige) HTML5 syntax.
We kunnen zelf ook directives (custom HTML elementen) schrijven, dit doen we in onze eigen namespace ‘ga’. Zo vermijden we conflicten met Angular of HTML5 elementen.
Bijvoorbeeld ga-lid="{{lid.id}}" creëert een EventListener om de pagina van dat lid te laden.
Cursus AngularJS: http://angular.codeschool.com
Een debug panel voor AngularJS.