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.