Follow Us on Twitter

De Architectuur van AngularJS

Mei 2017 - AngularJS is een door Google ontwikkeld framework voor frontend-applicaties en in 2012 aan het grote publiek gepresenteerd. Het is een belangrijke frontend development standaard aan het worden.

In ons Whitebook "AngularJS voor dummies" van september 2014 hebben we al stilgestaan bij AngularJS. Ondertussen is de ontwikkeling doorgegaan, en is er op een gegeven moment zelfs voor gekozen de geleerde lessen te gebruiken om een geheel vernieuwde versie te maken die Angular heet. Die is al bij versie 4 en daar wordt volop aan ontwikkeld. AngularJS bestaat nog steeds, en ook daar worden nog nieuwe versies voor uitgebracht. De laatste versie op het moment van schrijven is 1.6.4.

Dit Whitebook gaat over de architectuur van AngularJS. Deze wordt uitgelegd aan de hand van voorbeelden.

Verschillen tussen AngularJS en Angular

De release van “The New Angular” (wat nu Angular heet, dus zonder “JS”) is een volledig van de grond af gebouwd framework en is nauwelijks te vergelijken met AngularJS. Applicaties die in AngularJS zijn gebouwd kunnen niet zomaar gemigreerd worden naar Angular. Zie het maar als een nieuw framework met toevallig bijna dezelfde naam.

Een aantal belangrijke verschillen tussen Angular en AngularJS zijn:

  • Angular is in TypeScript geschreven, een door Microsoft ontwikkelde open superset (een programmeertaal die alle eigenschappen van een andere programmeertaal heeft, maar is uitgebreid of verbeterd met andere eigenschappen) van JavaScript, en AngularJS is puur JavaScript
  • AngularJS draait volledig in de browser, waar Angular een server-side platform is
  • Angular is meer ingesteld op mobiele websites dan AngularJS
  • Angular is een stuk sneller dan AngularJS

Waarom dan toch een artikel over AngularJS? Voornamelijk omdat AngularJS nog niet achterhaald is. Het heeft een aantal voordelen. Ten eerste kun je je bestaande JavaScript kennis meteen inzetten, waar je bij Angular echt moet leren om met TypeScript te programmeren.

Maar één van de belangrijkste voordelen is dat AngularJS een heel stuk simpeler is om op te zetten en een eerste applicatie te bouwen! Meer dan een paar HTML bestanden en wat JavaScript heb je niet nodig om een dynamische single-page applicatie te maken. Angular daarentegen vergt redelijk wat kennis over het installeren van de Angular CLI (command line interface) en het configureren daarvan.

Architectuur

Het MVC-model

De architectuur van AngularJS kan niet begrepen worden zonder te weten wat een MVC-model is. Dit model om web- en mobile applicaties te ontwikkelen is zeer populair en wordt door bijna alle platformleveranciers omarmd.

De letters MVC staan voor:

  • Model
  • View
  • Controller

Wat houdt dit nu in?

Het Model is dat onderdeel van je applicatie dat verantwoordelijk is voor de gegevens in je applicatie. Het reageert op de andere componenten, de View en de Controller, en werkt zijn eigen status bij op basis van de aangeleverde informatie. Verder doet het niets. Er is geen verdere afhankelijkheid met de View of de Controller.

De View is dat deel van de software dat informatie presenteert in een specifiek formaat. De view is verantwoordelijk voor het tonen van de gegevens in het Model, en stuurt de gebruikersinteractie (zoals een button click) naar de Controller.

De Controller zelf, tenslotte, is het onderdeel dat het aanleveren van de gegevens uit de Model aan de View geeft. Ook zit hier de logica in die achter een gebruikersactie, zoals een button click, zit.

In sommige gevallen zijn de Controller en de View hetzelfde object. Het Model is wel altijd onafhankelijk van de andere componenten!

Hoe werkt dat in de praktijk?

Stel dat je een Model hebt dat Persoon heet. Dit is een object dat persoonsgegevens opslaat. Vervolgens maak je een ander object dat je PersoonLijstController noemt. Dat is de Controller, die in staat is zowel het Model als de View aan te passen. En we kunnen nu een PersoonLijstView object maken dat een overzicht van Personen aan de gebruiker toont.

Als er nu een verzoek komt om dezelfde gegevens te tonen, maar in een andere lay-out of met andere elementen uit het Persoon object, volstaat het om een nieuw View object te maken. En andersom, de gemaakte View objecten kunnen ook door andere Controllers aangeroepen worden! Ofwel, hergebruik van componenten wordt nu heel makkelijk omdat ze geen afhankelijkheden hebben.

De AngularJS architectuur

Als we het MVC model vertalen naar AngularJS, dan is het Model in AngularJS een zogenaamd POJO (Plain Old JavaScript Object). Ofwel, het model is geschreven in eenvoudige JavaScript code, wat prettig is omdat het bestaande technologie voor websites is en daarom geen aanvullende eisen aan de ontwikkelomgeving of website stelt.

De View wordt in AngularJS ook wel de template genoemd. Ook hier geldt de naadloze integratie met bestaande technologie: AngularJS templates zijn in HTML geschreven en maken gebruik van het directives model, een door de HTML standaard toegestane methode om zelf-gedefinieerde attributen aan HTML tekst toe te voegen. AngularJS gebruikt die “custom attributes” om HTML uit te breiden met programmeertaal-achtige functies.

Een voorbeeld van een directive:

<div ng-app="whitebook">
  <p>Auteur: <input type="text" ng-model="auteur"></p>
  <p ng-bind="auteur"></p>
</div>

Dit is perfect valide HTML code, ondanks dat er attributen in gebruikt worden die niet bekend zijn in HTML, zoals “ng-app” en “ng-model”. Een browser zal deze code ook gewoon renderen en de attributen negeren. AngularJS kan die attributen gebruiken om:

  • Een AngularJS applicatie te definiëren (ng-app).
  • Applicatiedata aan HTML elementen (zoals input elements en select lists) binden (ng-model).
  • En tenslotte applicatiedata aan de HTML view (ng-view).

De Controller in AngularJS bevat alle business logica die door de View gebruikt wordt. Daarnaast bestaat er nog een object dat Scope heet in AngularJS, en deze handelt de informatiehandeling tussen de Controller en de View af.

Overigens gebruiken zowel Angular als AngularJS een variant op de MVC, die MVVM genoemd wordt. Dit staat voor Model-View-View Model, en heeft als subtiel verschil dat het concept van two-way binding (ook wel bi-directional data binding genoemd) ondersteund wordt in tegenstelling tot de MVC. Two-way binding is een belangrijk concept in Angular en AngularJS en zorgt ervoor dat, wanneer het Model aangepast wordt, de UI elementen ook bijgewerkt worden, en vice versa. Zie voor meer informatie daarover bijvoorbeeld de Angular JS Tutorial – MVC and MVVM Design Patterns op DZone.

Opbouw van een AngularJS applicatie

Nu we een beeld hebben hoe AngularJS er in grote lijnen uitziet, kunnen we gaan kijken naar de structuur van een AngularJS applicatie.

Terug naar het voorbeeld wat we eerder gaven (kopieer dit naar een bestand, sla op als HTML en open met je browser om het in werking te zien):

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  </head>
  <body>
    <div>
      <p>Auteur: <input type="text" ng-model="auteur"></p>
      <h1>Een whitebook geschreven door {{auteur}}</h1>
    </div>
  </body>
</html>

Met dit kleine stukje code worden twee kenmerken van AngularJS getoond. Het eerste is het al eerder genoemde directive principe waarbij custom attributes in HTML gebruikt worden om AngularJS te integreren in de webpagina. ng-app is het attribuut dat er voor zorgt dat het AngularJS proces start.

Het tweede is het concept van bi-directional data binding. Zoals al benoemd, zorgt dit ervoor dat wanneer de data in het Model verandert, de UI (dus de View(s)) automatisch wordt bijgewerkt. En andersom! Op die manier zijn alle aanpassingen die de gebruiker doet direct zichtbaar in het Model, en zijn updates in het Model vanuit de backend ook direct zichtbaar op de pagina.

De implementatie van bi-directional data binding zie je terug in het voorbeeld door de ng-model clausule. Hiermee zeg je tegen AngularJS: Ik heb een element “auteur” in mijn Model, en die wil ik door de gebruiker laten wijzigen via het input element, en ook tonen aan de gebruiker door middel van de directive template {{auteur}}. Vult de gebruiker de input met tekst, dan wordt het Model direct aangepast en de template dus ook. En dat zonder een regel JavaScript te hoeven schrijven!

Gebruik van de Angular module

Bovenstaand voorbeeld is op zichzelf indrukwekkend, maar heeft weinig praktisch nut en is zeker nog geen volwaardige app. Zodra je echte functionaliteit wil gaan maken, wordt het iets ingewikkelder.

De oplettende lezer zal opgevallen zijn dat in het eerste voorbeeld de ng-app “whitebook” als parameter had, en er in het tweede voorbeeld geen parameter bij stond. Dit komt omdat deze als module gedefinieerd moet worden in het Controller deel. Dat gaat als volgt.

Maak een nieuwe bestand aan naast de HTML-file, bijvoorbeeld main.js. Roep deze aan in de HTML head sectie als volgt:

<script src="main.js"></script>

En pas de main.js aan met deze regel:

var app = angular.module('whitebook', []);

Nu kan de HTML tag ook aangepast worden:

<html ng-app=”whitebook” ng-controller=”wbCtrl”>

Bij het laden van de pagina zal AngularJS de app “whitebook” bootstrappen, ofwel… opstarten. Overigens kan de ng-app attribute op elk element op de pagina geplaatst worden. Het AngularJS framework verwerkt alleen het DOM element (DOM = Document Object Model: de door de browser geparste HTML code. Dus als je een lege div in HTML hebt, en je voegt er met JavaScript tekst aan toe, bevat de DOM de div inclusief tekst) waar het op geplaatst is en alles wat daar binnen valt.

Meerdere ng-app directives zijn niet toegestaan. Wil je meer dan één Angular applicatie in je HTML, dan moet je handmatig bootstrappen en kan je niet van de ng-app directive gebruik maken. Zie voor een voorbeeld The ng-app Directive op TutorialsTeacher.

Het is een best practice om de module (in ons voorbeeld de main.js) en de controllers in aparte JavaScript files te zetten. Een controller heeft de volgende structuur:

app.controller('wbCtrl', function($scope) {
  $scope.auteur = "Wit Paard";
});

De eerder genoemde scope wordt hier nu ook gebruikt: het is standaard werkwijze om deze variabele bij het aanmaken van de Controller als argument mee te geven. De scope is de eigenaar van de AngularJS variabelen en functies en is beschikbaar voor zowel de View als de Controller. In dit geval wordt de variabele auteur gevuld met de waarde “Wit Paard”. Bij het laden van de pagina zal zowel de HTML input als de headertekst al ingevuld zijn met deze waarde.

Nu hebben we in feite de basis van een AngularJS applicatie staan. Er is nog één kenmerk dat belangrijk is om te vermelden, en dat zijn modules. We hebben in bovenstaand voorbeeld al één module, maar voor het overzicht en om functionaliteit te scheiden, is het verstandig meerdere modules aan te maken. Dit doe je door tussen de vierkante haken in de main.js een modulenaam toe te voegen:

var app = angular.module('whitebook', ['whBlogs']);

De module krijgt zijn eigen Controller met daarin de business logica als volgt:

angular.module('whBlogs').controller('BlogCtrl', function () {
// ...
});

Daarmee is de code voor de whBlogs module gescheiden van die van de whitebook module en kunnen de dependencies ook beperkt worden.

Conclusie

Alhoewel de eerste opzet van AngularJS heel compact is en bijzonder weinig code vergt, is het niet voor iedereen duidelijk hoe de opbouw is qua architectuur en wat de functie is van de verschillende elementen. Echt begrijpen hoe dit in elkaar steekt helpt om snel aan de slag met AngularJS te kunnen. De krachtige concepten van directives en two-way binding zorgen ervoor dat het tonen en manipuleren van gegevens in de browser eenvoudig gerealiseerd kan worden waarbij de performance behouden blijft.

Is het nu verstandig om nog te investeren in AngularJS? Dat hangt heel erg van de eisen af die gesteld worden. Moet het een grote, complexe website worden met veel nadruk op validaties en is de developmentroadmap er eentje met een verre horizon? Dat is natuurlijk het geval voor de meeste projecten en dan is Angular misschien een betere optie. Voor een ieder die de concepten van Angular en AngularJS onder de knie wil krijgen en met bestaande JavaScript-kennis en eerste single-page webapplicatie wil maken, kan het zeker geen kwaad om eerst met AngularJS aan de slag te gaan. Ben je er dan wel van bewust dat “migreren” naar Angular niet kan. Opnieuw beginnen, én TypeScript leren, is dan de enige optie.

Waardering:
 
Tags:

Reacties

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Meer informatie over formaatmogelijkheden

CAPTCHA
Deze vraag is om te testen of u een persoon bent en om spam te voorkomen
Image CAPTCHA
Enter the characters shown in the image.