AngularJS
AngularJS, nieuwste versie heet Angular, is een open source webapplicatieframework dat wordt onderhouden door Google en een collectief van individuele ontwikkelaars en bedrijven die bezig zijn de mogelijkheden voor het ontwikkelen van Single Page Applications (SPA) te verbeteren. Het doel is het vereenvoudigen van zowel de ontwikkeling als het testen van dergelijke applicaties door het aanbieden van een framework voor client-side model-view-controller (MVC)-architectuur, samen met componenten die gewoonlijk worden gebruikt in rich internet applications.

Het framework werkt door eerst de HTML-pagina te lezen, waarin aanvullende specifieke HTML-attributen zijn opgenomen. Die attributen worden geïnterpreteerd als directieven (Engels: directives) die ervoor zorgen dat Angular invoer- of uitvoercomponenten van de pagina koppelt aan een model dat wordt weergegeven door middel van standaard JavaScript-variabelen. De waarden van die JavaScript-variabelen kunnen worden ingesteld binnen de code, of worden opgehaald uit statische of dynamische JSON-dataobjecten.

Architectuur

Uitgangspunten bij het ontwerp
Angular is gebouwd op basis van de zienswijze dat declaratief programmeren behoort te worden gebruikt voor het bouwen van gebruikersinterfaces en het koppelen van softwarecomponenten, terwijl imperatief programmeren beter geschikt is voor het definiëren van bedrijfslogica. Het framework gebruikt traditionele HTML en geeft hier een uitbreiding aan om dynamische inhoud (Engels: content) te presenteren door middel van data-koppeling in twee richtingen (Engels: two-way data-binding), die zorgt voor automatische synchronisatie van modellen en views. Het resultaat hiervan is dat Angular de noodzaak om het Document Object Model (DOM) te manipuleren vermindert, met het doel om de testbaarheid en het prestatievermogen (de performance) te verbeteren.

De ontwerpdoelstellingen van Angular omvatten:
Ontkoppel manipulatie van het DOM van de applicatielogica. Dit verbetert de testbaarheid van de programmacode.
Ga ervan uit dat het testen van de applicatie net zo belangrijk is als het ontwikkelen. De testbaarheid wordt sterk beïnvloed door de manier waarop de code gestructureerd is.
Ontkoppel het client-deel van een applicatie van het server-deel. Hierdoor kunnen de ontwikkelwerkzaamheden parallel worden uitgevoerd en wordt hergebruik van de software aan beide kanten mogelijk.
Bied een structuur voor het gehele proces van het bouwen van een applicatie: het ontwerpen van de gebruikersinterface, het schrijven van de bedrijfslogica en het testen.

Angular implementeert het model-view-controller-model ontwerppatroon om datamodel (model), datapresentatie (view) en applicatielogica (controller) van elkaar te scheiden. Door gebruik te maken van dependency injection brengt Angular services die traditioneel aan de server-side werden uitgevoerd, zoals view-afhankelijke controllers, naar de client-side van de webapplicatie. Het gevolg hiervan is dat een deel van de belasting van de server wordt weggenomen.

Opstarten (Engels: bootstrapping)
De taken die door de Angular bootstrapper worden uitgevoerd, gebeuren in drie fasen nadat het DOM geladen is:
laden van de methode, die is gekoppeld aan het ng-app-directief
creatie van een nieuwe injector
compilatie van de directieven die het dynamische deel van het DOM opbouwen

Data-koppeling in twee richtingen
Data-koppeling in twee richtingen is een van de meest opmerkelijke eigenschappen van Angular. Deze faciliteit vermindert de hoeveelheid code doordat de backend-server niet meer verantwoordelijk is voor het invullen van templates. In plaats hiervan worden templates in gewoon HTML opgebouwd met gegevens die worden bewaard in een scope die in het model is gedefinieerd. Een scope in Angular is een object dat verwijst naar het applicatiemodel. Het is een omgeving (Engels: context) waarbinnen expressies kunnen worden uitgevoerd. Scopes zijn georganiseerd in een hiërarchische structuur die de DOM-structuur van de applicatie nabootsen. De $scope-service in Angular ontdekt wijzigingen in het model-gedeelte en werkt HTML-expressies in de view bij via een controller. Bovendien worden alle wijzigingen in de view weergegeven in het model. Hierdoor is het niet meer nodig om het DOM actief te manipuleren en dit stimuleert een snelle ontwikkeling van prototypen van webapplicaties.
Angular ontdekt wijzigingen in modellen door het vergelijken van waarden met eerder opgeslagen waarden in een proces dat dirty-checking wordt genoemd. Dit in tegenstelling tot Ember.js en Backbone.js, die bij het wijzigen van waarden in het model gebruikmaken van listeners, software die reageert op bepaalde gebeurtenissen (Engels: events), zoals acties van een gebruiker.

Belangrijke directives 
Angular-directives zijn markeringen op een DOM-element (zoals een attribuut, elementnaam, commentaar of CSS-klasse), die ervoor zorgen dat de HTML-compiler van Angular een bepaald gedrag aan dat DOM-element koppelt. Angular bevat een aantal ingebouwde directives, maar ontwikkelaars kunnen ook zelf maatwerkdirectives maken. Enkele van de meest gebruikte standaarddirectives zijn:

ng-app declareert het root-element (het hoogste element in de structuur) van een Angular-applicatie, waaronder directives gebruikt kunnen worden om data-koppelingen te declareren en gedrag te definiëren.
ng-bind stelt de tekst van een DOM-element in op de waarde van een expressie. <span ng-bind="naam"></span> zal bijvoorbeeld de waarde van de variabele 'naam' binnen het span-element laten zien. Alle veranderingen in de variabele ‘naam’ in de scope van de applicatie worden onmiddellijk in het DOM weergegeven.
ng-model vergelijkbaar met ng-bind, maar deze directive ontwikkelt een data-koppeling in twee richtingen tussen de view en de scope.
ng-model-options maakt het mogelijk in te stellen hoe wijzigingen in het model worden aangebracht.
ng-class maakt het mogelijk CSS-klasse-attributen dynamisch te koppelen aan een HTML-element. Dit gebeurt door middel van een data-koppeling van een expressie, die de toe te voegen CSS-klassen vertegenwoordigt.
ng-controller koppelt een JavaScript-controller-klasse aan de view. Dit is een cruciaal onderdeel van de manier waarop Angular het model-view-controller ontwerppatroon implementeert. Controller-klassen bevatten de bedrijfslogica achter de applicatie, zij voorzien de scope van functies en waarden.
ng-repeat instantieert een element eenmaal per item uit een verzameling.
ng-show & ng-hide toont of verbergt een element op basis van een conditie, afhankelijk van de waarde van een boolean-expressie. Het tonen en verbergen gebeurt door het instellen van de CSS-presentatiestijl.
ng-switch instantieert een template uit een verzameling keuzemogelijkheden op basis van een conditie, afhankelijk van de waarde van een expressie.
ng-view de directive die verantwoordelijk is voor het behandelen van routes die worden aangegeven door URL's. Het definiëren van routes zorgt ervoor dat templates worden weergegeven, die worden aangestuurd door gespecificeerde controllers.
ng-if deze directive zorgt voor het verwijderen of opnieuw tonen van een deel van het DOM, gebaseerd op een expressie die de waarde waar ('true') of onwaar ('false') kan aannemen. Wanneer de expressie onwaar is, wordt het element uit het DOM verwijderd. Wanneer de expressie waar is, wordt een exemplaar van het element (opnieuw) ingevoegd.

Chrome-plug-in
In juli 2012 bouwde het Angular-team een plug-in voor de Google Chrome-browser genaamd Batarang, die helpt bij het opsporen van fouten (debuggen) in webapplicaties die met Angular zijn gebouwd. Deze plug-in helpt om performance-problemen snel te ontdekken en hij bevat een grafische gebruikersinterface voor het debuggen van applicaties. Er zijn problemen gemeld met Batarang in combinatie met recente Angular-releases (na v1.2.x).

Ondersteuning van oudere browserversies
Angular Release 1.2 en later bieden geen ondersteuning voor Internet Explorer versies 6 of 7. Met ingang van Angular Release 1.3 is de ondersteuning voor Internet Explorer 8 vervallen.

Geschiedenis
Angular is oorspronkelijk ontwikkeld in 2009 door Miško Hevery en Adam Abrons vanuit het bedrijf Brat Tech LLC als de software achter een online JSON-opslagapparaat waarvan de prijs per megabyte zou worden bepaald, om eenvoudig te maken applicaties voor het bedrijf te kunnen ontwikkelen. Deze onderneming was gevestigd op webdomein 'GetAngular.com' en had enkele abonnees, voordat de twee besloten het bedrijfsmodel op te geven en Angular vrij te geven als opensource framework.

Abrons verliet het project, maar Hevery, die werkt bij Google, ging verder met de ontwikkeling en het onderhoud van het framework, samen met Google-werknemers Igor Minár en Vojta Jína.

Angularjs-releases
Releases 1.0.x, 1.2.x, 1.3.x, 1.4.x en 1.5.x zijn de stabiele versies, terwijl 1.1.x in enkele subversies wijzigingen bevatte die eerder gemaakte software liet falen (ze bevatten 'breaking changes').

De codenamen zijn gerelateerd aan superhelden, ze bestaan uit twee door een koppelteken gescheiden woorden, die 'leuk / gek / gaaf' moeten klinken en openbaar worden vrijgegeven waarna gebruikers erop kunnen stemmen.

Toekomstige ontwikkelingen 
Parallel wordt gewerkt aan drie nieuwe releases van Angular:
 Release 1.x.x die verder bouwt op de huidige versie. Deze tak wordt AngularJS genoemd.
 Release 2.0 is bedoeld om een groot aantal verbeterpunten te realiseren en tevens om Angular aanzienlijk sneller en eenvoudiger te maken met een aanpak die niet haalbaar is middels incrementele stappen op basis van de 1.x-releases.
 Angular 4 werd op 13 december 2016 aangekondigd, versie 3 wordt overgeslagen om verwarring te vermijden met een NPM-package verspreid onder de naam v3.3.0. Versie 4 is backwards compatible met Angular 2.

Vergelijking met Backbone.js 
Data-koppeling De meest opvallende eigenschap die de frameworks Angular en Backbone.js onderscheidt, is de manier waarop modellen en views gesynchroniseerd worden. Terwijl Angular data-koppeling in twee richtingen ondersteunt, is Backbone.js sterk afhankelijk van gedupliceerde code (Engels: boilerplate code) om zijn modellen en views op een lijn te brengen.

REST Backbone.js communiceert goed met RESTful services in de backend. Ook met Angular is toepassing van REST-API's eenvoudig mogelijk door gebruik te maken van de $resource-service. Angular beschikt bovendien over een $http-service die flexibeler is en koppelingen met servers op afstand mogelijk maakt, door middel van een XMLHttpRequest-object van de browser of via JSONP-code.

Templates Angulars mogelijkheden om templates toe te passen maken gebruik van een combinatie van aanpasbare HTML-tags en expressies. Backbone.js wordt geleverd met de template()-functie van Underscore.js en integreert ook met andere templating-software, zoals Mustache.

Literatuur

Zie ook 
 Client-servermodel
 HTML-scripting
 JavaScript
 Rich internet application
 Server-side scripting
 Webdevelopment

Externe links 
 AngularJS-projectpagina
 ng-conf - Angular-conferentie in VS
 ng-europe - Angular-conferentie in Europa (gearchiveerd)
 Bibliotheek met AngularJS-modules (gearchiveerd)
 Applicaties die zijn gebouwd met AngularJS (gearchiveerd)
 AngularJS op Google Groups
 AngularJS op Google+ (gearchiveerd)
 Batarang Chrome-plug-in op Github
 NG-CONF 2014 Video's en slides (gearchiveerd)
 NG-EUROPE 2014 Video's en slides (gearchiveerd)
 AngularSpot, collectief van AngularJS-ontwikkelaars (gearchiveerd)
 Vergelijking van applicatie-frameworks die m.b.v. AngularJS zijn gebouwd (gearchiveerd)
 Videotrainingen voor AngularJS
 Blog van AngularJS-ontwikkelaars

Opensourcesoftware en vrije software
Framework