AngularJS - noelvaes.eu · framework: AngularJS. De nodige informatie over dit framework is te...

AngularJS

Vrijwel alle namen van software- en hardwareproducten die in deze cursus worden genoemd, zijn tegelijkertijd ook handelsmerken en dienen dienovereenkomstig te worden behandeld.

Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand of openbaar worden gemaaktin enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de auteur. De enige uitzondering die hierop bestaat, is dat eventuele programma’s en door de gebruiker te typen voorbeelden mogen worden ingevoerd opgeslagen en uitgevoerd op een computersysteem, zolang deze voor privé-doeleinden worden gebruikt, en niet bestemd zijn voor reproductie of publicatie.

Correspondentie inzake overnemen of reproductie kunt u richten aan:

Noël VaesRoode Roosstraat 53500 HasseltBelgië

Tel: +32 474 38 23 94

[email protected]

Ondanks alle aan de samenstelling van deze tekst bestede zorg, kan de auteur geenaansprakelijkheid aanvaarden voor eventuele schade die zou kunnen voortvloeien uit enige fout, die in deze uitgave zou kunnen voorkomen.

24/09/2016

Copyright© 2016 Noël Vaes

InhoudsopgaveHoofdstuk 1: Inleiding..........................................................2

1.1. Wat vooraf gaat: JavaScript & Ajax..............................................................................21.2. Installatie en eerste pagina..........................................................................................21.3. Architectuur van AngularJS.........................................................................................5

1.3.1. MVW-architectuur................................................................................................51.3.2. Dubbele binding tussen Model en View................................................................51.3.3. HTML-templates en DOM....................................................................................6

Hoofdstuk 2: Expressions....................................................9Hoofdstuk 3: Filters............................................................11Hoofdstuk 4: Modules.........................................................16Hoofdstuk 5: Controllers....................................................19Hoofdstuk 6: Scopes..........................................................22Hoofdstuk 7: Dependency Injection...................................27Hoofdstuk 8: Directives......................................................33

8.1. ng-app.......................................................................................................................338.2. ng-init.........................................................................................................................338.3. ng-controller...............................................................................................................338.4. ng-model....................................................................................................................338.5. ng-strict-di..................................................................................................................348.6. ng-hide en ng-show...................................................................................................348.7. ng-src.........................................................................................................................358.8. ng-repeat...................................................................................................................368.9. ng-options..................................................................................................................398.10. ng-class...................................................................................................................41

Hoofdstuk 9: Event handling..............................................45Hoofdstuk 10: Formulieren en validatie.............................50

10.1. Formulieren afhandelen...........................................................................................5010.2. Validatie...................................................................................................................5210.3. Stijlkenmerken.........................................................................................................5710.4. Globale functies.......................................................................................................59

Hoofdstuk 11: Services......................................................6311.1. Dependency injection van services..........................................................................6311.2. HTTP Service..........................................................................................................65

11.2.1. Ajax en REST...................................................................................................6511.2.2. Query-parameters............................................................................................6811.2.3. Methoden met inhoud.......................................................................................6911.2.4. JSON...............................................................................................................71

Hoofdstuk 12: Eigen Modules en Services........................7412.1. Inleiding...................................................................................................................7412.2. Eigen modules.........................................................................................................7412.3. Waarden..................................................................................................................7512.4. Services...................................................................................................................76

Copyright© 2016 Noël Vaes - 1 - www.noelvaes.eu

http://www.noelvaes.eu/java-syllabus?utm_source=Voorproef&utm_medium=PDF&utm_campaign=XXX

Inleiding

Hoofdstuk 1: Inleiding

1.1. Wat vooraf gaat: JavaScript & Ajax1

JavaScript is een scripttaal die veel gebruikt wordt om in webpagina's dynamisch gedrag toe te voegen. Ze biedt de mogelijkheid de DOM-structuur van een webpagina te manipuleren en deze wijzigingen tonen zich onmiddellijk in de layout van de pagina. Daardoor kunnen we toepassingen in de browser ontwikkelen die snel reageren op acties van de gebruiker. Het is dan niet meer nodig bij elke actie een nieuwe pagina te laten genereren door de webserver. Indien we toch nieuwe gegevens nodig hebben van de webserver of indien we nieuwe gegevens willen versturen naar de webserver, kunnen we dit eenvoudig doen met Ajax (Asynchronous JavaScript and XML). De webserver moet dan enkel de nieuwe gegevens aanleveren of in ontvangst nemen. Het dataformaat dat we hiervoor gebruiken is doorgaans JSON. Op die manier hebben we eigenlijk maar één enkele webpagina nodig die door de interactie met de gebruiker telkens wijzigt door DOM-manipulaties. Zulke toepassingen noemt men Single Page Applications (SPA) en zijn de laatste jaren heel populair voor het ontwikkelen van allerlei toepassingen.

Als we evenwel kijken naar de JavaScript-code die nodig is voor de event handling, de DOM-manipulaties en de Ajax-verzoeken, dan zien we dat die code behoorlijk omslachtig kan worden en dat een aantal elementen voortdurend herhaald worden. We kunnen dit uiteraard zelf organiseren door een of andere vorm van modulair programmeren. Maar we kunnen ookberoep doen op een bibliotheek zoals jQuery of script.aculo.us. Hierbij kunnen we dan handig gebruik maken van de objecten en methoden uit deze bibliotheek zodat we ons meer kunnen concentreren op de specifieke code voor onze applicatie.

1. Nog een stap verder is het gebruik van een JavaScript framework. Dit biedt een compleet raamwerk voor een webapplicatie. In deze cursus richten we ons op zo'n framework: AngularJS. De nodige informatie over dit framework is te vinden op volgende website www.angularjs.org. AngularJS is een open source framework dat door Google onderhouden wordt. Het is momenteel heel populair en uiterst geschikt voor toepassingen die gebaseerd zijn op CRUD: Create-Read-Update-Delete van gegevens.

In volgende paragrafen gaan we dit framework stap voor stap verkennen.

1.2. Installatie en eerste paginaAngularJS bestaat uit JavaScript-code die we moeten toevoegen aan een HTML-pagina. Dit doen we uiteraard op de klassieke manier via een <script>-tag.

Het script-bestand kunnen we afhalen op de website van AngularJS en vervolgens plaatsen in een map in onze webapplicatie, typisch /js. Er zijn twee versies van het script-bestand: een leesbaar bestand en een bestand dat verkleind is (minified). De gewone versie is interessanter in de ontwikkelen testfase omdat de foutmeldingen duidelijker zijn. In productiefase kan men eventueel overwegen de verkleinde versie te gebruiken.

De tag ziet er dan als volgt uit:

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

We kunnen vanuit onze HTML-pagina ook onmiddellijk verwijzen naar dit bestand op het internet. We maken hiervoor gebruik van de versie die gepubliceerd is op

1 Deze cursus vooronderstelt een grondige kennis van JavaScript en Ajax. Zie eventueel de cursus 'JavaScript & Ajax'.



http://www.angularjs.org/

Inleiding

het Google Content Delivery Network (GDN). We dienen hierbij wel telkens de versie op te geven.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>

Het voordeel van deze laatste techniek is dat de browser het bestand mogelijk al in zijn cache heeft ten gevolge van een andere toepassing die op dit bestand gebaseerd is. Het nadeel is evenwel dat de toegang tot internet gegarandeerd moet zijn hetgeen niet altijd zo isbij intranettoepassingen. Voorts kan het ook een beveiligingsrisico inhouden omdat men beroep doet op een bestand dat buiten de eigen controle valt.

In deze cursus zullen we het script-bestand manueel afhalen en het toevoegen aan onze webtoepassing.

Laten we alvast onze eerste pagina maken met AngularJS:

<!DOCTYPE html><html data-ng-app><head><meta charset="UTF-8"><title>My first page in AngularJS</title></head><body>

<div>Enter your name:

<input type='text' data-ng-model="name" /></div><div>Hello {{name}}</div><script src="js/angular.js"></script>

</body></html>

De elementen die specifiek zijn voor AngularJS hebben we in het vet weergegeven.

Laten we beginnen met de integratie van het script. In tegenstelling tot wat doorgaans wordt aanbevolen, voegen we de <script>-tag niet toe in de hoofding maar op het einde van <body>. Dit zorgt gewoon voor een kleine snelheidswinst omdat het opbouwen van de DOM-structuur door de browser niet wordt onderbroken door het inladen van het script. Uiteraard mag het script ook gewoon in de hoofding geladen worden. Voor de werking van AngularJS maakt het verder geen verschil. AngularJS wordt toch maar actief nadat het gehele document is ingeladen, ongeacht de plaats van de <script>-tag.

Verder hebben we in de tag <html> het attribuut data-ng-app toegevoegd. Dit zorgt ervoor dat dit gedeelte van de webpagina verbonden wordt aan een AngularJS-module op de achtergrond. Dit attribuut activeert dus AngularJS.

Voorts hebben we een gewoon invoerveld waarbij we ook een extra attribuut data-ng-model toevoegen. Dit zorgt ervoor dat de inhoud van het invoerveld automatisch gesynchroniseerd wordt met een variabele met de naam 'name'. Deze variabele kunnen we onmiddellijk gebruiken in de expression {{name}}.

De magie bestaat er in dat iedere wijziging in het invoerveld, onmiddellijk weerspiegeld wordt



Inleiding

in de inhoud van de variabele en dat we deze gewijzigde inhoud ook onmiddellijk te zien krijgen in de expression.

Hoe deze magie werkt, zullen we in volgende paragrafen systematisch uitleggen. Laten we nu gewoon even genieten van de show!

Opdracht 1: Mijn eerste pagina met AngularJS Maak een nieuw webproject ergens op je systeem. Eventueel kan je gebruik maken

van een IDE of HTML editor maar Notepad is ook goed. Haal het script-bestand af van de website www.angularjs.org . Plaats dit script-bestand in de map /js van je webproject. Maak een nieuw HTML-bestand (hello.html) met volgende inhoud:

<!DOCTYPE html><html data-ng-app><head><meta charset="UTF-8"><title>My first page in AngularJS</title></head><body>

<div>Enter you name:

<input type='text' data-ng-model="name" /></div><div>Hello {{name}}</div><script src="js/angular.js"></script>

</body></html>

Open het bestand in de browser. Het is niet nodig de webapplicatie effectief op een webserver te plaatsen. Je kan het bestand gewoon met de browser openen vanaf eenlokale map.

Verifieer dat elke wijziging in het invoerveld onmiddellijk zichtbaar is in de begroeting.

In dit eerste voorbeeld hebben we twee extra attributen gebruikt die specifiek zijn voor AngularJS:

data-ng-appdata-ng-model

In het verdere verloop zullen er nog meer van dergelijke attributen volgen. Deze attributen beginnen telkens met het woord data maar strikt genomen is dit niet nodig. We kunnen ook het volgende schrijven



http://www.angularjs.org/

Inleiding

<html ng-app>

<input type='text' ng-model="name" />

De specifieke attributen voor AngularJS beginnen telkens met ng-. Vermits deze attributen geen geldige HTML5-attributen zijn, zullen HTML editors dit markeren als foutief en zal een controle op geldige HTML5-opmaak om die reden ook falen.

HTML5 laat evenwel toe attributen toe te voegen voor eigen gebruik. Deze moeten dan beginnen met het woord data-. Daarmee wordt aangegeven dat het gaat om gegevens die niets te maken hebben met de layout maar wel met datagegevens die verder behandeld worden door de achterliggende JavaScript-code. Het is gewoon een manier om extra gegevens toe te voegen aan de DOM-structuur van een webpagina. AngularJS is in staat te werken met deze attribuutstructuur en zal attributen die beginnen met data-ng op dezelfde manier behandelen als attributen die beginnen met enkel ng-.

Kortom, indien men met AngularJS ook pagina's wil maken die volledig voldoen aan de HTML-5-standaard, is het aangewezen telkens het voorzetsel data- te gebruiken voor iederattribuut dat specifiek is voor AngularJS. In deze cursus zullen we dat daarom ook systematisch doen.

1.3. Architectuur van AngularJSNa het aanschouwen van de magie van vorig voorbeeld is het nu tijd voor wat meer uitleg over de werking en architectuur van AngularJS. Dat zal ons in staat stellen beter te begrijpenhoe het allemaal werkt en het helpt ons om AngularJS op een creatieve manier te gebruiken.

1.3.1. MVW-architectuur

AngularJS is gebaseerd op de MVW-architectuur. Mogelijk is de MVC-architectuur de lezer bekend: Model View Controller. hierbij wordt een interactieve toepassing opgesplitst in drie onderdelen:

Model: dit gedeelte bevat de achterliggende gegevens en vaak ook de applicatielogica.View: dit gedeelte bevat de visuele voorstelling van de applicatie.Controller: dit gedeelte bevat de code die uitgevoerd wordt als de gebruiker een actie onderneemt. Hierbij wordt doorgaans het model aangepast en/of de achterliggende applicatielogica aangesproken waarna een update van de view gebeurt.

De MVW-architectuur is de afkorting van Model View Whatever. Whatever? Ja die derde component kan van alles zijn en is in wezen minder belangrijk. Het gaat bij AngularJS vooral om de View en het Model. Doorgaans is er nog een derde component en in de meeste gevallen is dat inderdaad een Controller. In deze cursus zullen we ook telkens zo'n controllergebruiken omdat het een goede en beproefde architectuur is voor bepaalde toepassingen.

Maar laten we eerst onze blik richten op het duo Model-View. In ons eerste voorbeeld hebben we hier reeds kennis mee gemaakt. We herhalen hier even de essentiële code:

Enter your name: <input type='text' data-ng-model="name" />Hello {{name}}</div>

1.3.2. Dubbele binding tussen Model en View

De View is de visuele voorstelling van de applicatie en die wordt volledig met HTML beschreven. We gebruiken hiervoor dus de bestaande HTML-tags.



Inleiding

Achter deze visuele voorstelling zit er ook een datastructuur die louter de gegevens bevat endie we Model noemen.

Bij de tag <input> hebben we aangegeven dat de inhoud gebonden is aan een variabele met de naam 'name'. Welnu, dit is (een gedeelte van) het Model. En we kunnen de inhoud van dit Model onmiddellijk weergeven met de expression {{name}}. Op de achtergrond is de variabele name een JavaScript-variabele waarvan de inhoud onmiddellijk gesynchroniseerd wordt met de elementen in de View die ernaar verwijzen: in dit geval het invoerveld en ook de expression. Dit noemt men de dubbele databinding in AngularJS: wijzigingen in de View worden onmiddellijk doorgegeven aan het achterliggende Model en ook omgekeerd. Dit maakt dat de View telkens een realtime weergave is van het Model.

Voor deze synchronisatie hoeven we zelf niets te doen. AngularJS doet dit voor ons. Het gevolg hiervan is dat we in JavaScript-code naar believen de inhoud van de variabele name kunnen veranderen en dat we er zeker van mogen zijn dat deze inhoud in de View onmiddellijk getoond zal worden in alle elementen die gebonden zijn aan deze variabele. Wehoeven dus geen JavaScript-code meer te schrijven voor deze synchronisatie. Dit bespaart ons een hoop werk want anders moesten via allerlei event handlers en DOM-manipulaties deze synchronisatie zelf doen. Dat is allemaal wel doenbaar met de nodige kennis van JavaScript en DOM maar het is interessanter als webontwikkelaar ons bezig te houden met waar het echt om draait: de specifieke logica van de applicatie die we willen ontwikkelen. De automatische synchronisatie tussen View en Model heeft nog een bijkomend voordeel. De applicatiecode die we gaan schrijven om te reageren op de interactie met de gebruiker, het maken van berekeningen, het uitwisselen van gegevens met de webserver via Ajax enz.. brengen we onder in het gedeelte Whatever, wat doorgaans een Controller is. Welnu vanuit dat gedeelte kunnen we dan naar believen het Model, of de datastructuur aanpassen zonder dat we rechtstreeks in interactie moeten treden met de View. Dit maakt dat dit gedeelte losgekoppeld is van de View en dat dit stukje code meer modulair en ook beter testbaar is. De combinatie Model-Controller kunnen we afzonderlijk ontwikkelen zonder ons veel zorgen te hoeven maken over de concrete View.

1.3.3. HTML-templates en DOM

Op dit moment is er nog heel wat magie in het spel tussen de View en het Model. We zullen nu iets meer hiervan onthullen.

Wat gebeurt er nu precies op de achtergrond als een webbrowser de pagina inlaadt? In eerste instantie zal de browser op basis van de HTML-code een interne DOM-structuur aanmaken.

Het script van AngularJS registreert op de achtergrond een event handler die opgeroepen


Afbeelding 1: Model en View: dubbele binding

View Model

name

{{name}}

<input type='text data-ng-model="name" />


Inleiding

zal worden zodra de pagina volledig is ingeladen en de DOM-structuur in het geheugen van de browser is opgebouwd. Dit stukje JavaScript-code gaat de volledige DOM-structuur op zijn beurt overlopen en gaat daarbij op zoek naar de specifieke attributen van AngularJS, met name de attributen die beginnen met data-ng of ng-. Deze specifieke attributen noemen we directives. Het eerste directive is daarbij data-ng-app. Zodra dit gevonden wordt, zal dat gedeelte van de DOM-structuur verbonden worden met een AngularJS-applicatiemodule. De overige directives en ook de expressions resulteren in de verdere uitbreiding van de DOM-structuur met extra event handlers en extra elementen en attributen.Men noemt dit proces ook wel het compileren van de pagina omdat het veel weg heeft van hetgeen gebeurt bij programmeertalen die gecompileerd worden. Het resultaat van dit alles is een verrijkte DOM-structuur. De verrijking bestaat dus uit extra elementen, attributen en event handlers die het o.a. mogelijk maken de gegevens tussen Model en View te synchroniseren.

Het is uiteindelijk deze verrijkte DOM-structuur die door de browser omgezet wordt in een layout die de gebruiker te zien krijgt.


Afbeelding 2: DOM-structuur

HTML DOM

<html data-ng-app><head> ... </head><body> <div> Enter you name: <input type='text' data-ng-model='name' /> </div> <div>Hello {{name}}</div></body></html>

document

head

body

div

input

div


Inleiding

De HTML-pagina wordt in dit geval gebruikt als een sjabloon of template op basis waarvan eerst de browser de DOM-structuur creëert en die vervolgens door AngularJS wordt uitgebreid. Wat de gebruiker uiteindelijk te zien krijgt is de visuele weergave van deze compileerde DOM-structuur en het is ook deze DOM-structuur waarmee de achterliggende JavaScipt-code mee in wisselwerking zal treden. AngularJS zal deze gecompileerde DOM-structuur telkens manipuleren zodat de gebruiker telkens een gewijzigde visuele voorstelling krijgt.

Als we even teruggrijpen naar ons concreet voorbeeld. We hebben daar een invoerveld. Welnu, AngularJS zal aan dit invoerveld zijn eigen event handler koppelen die bij elke wijziging van de inhoud de variabele name gaat aanpassen. En omgekeerd zal AngularJS elke wijziging van de variabele name observeren en het overeenkomstige gedeelte (de expression) in de DOM-structuur aanpassen met de nieuwe inhoud van de variabele.

Geef nu toe: dit hadden we ook zelf kunnen schrijven met de nodige kennis van JavaScript en DOM maar met AngularJS is het toch even makkelijker.


Afbeelding 3: Compilatie van de DOM-structuur

HTML DOM

<html><head><body>

</body></html>

document

head

body

div

input

div

extended DOM

document*

head*

body*

div*

input*

div*

compile


Expressions

Hoofdstuk 2: Expressions

In AngularJS kunnen we gebruik maken van expressions. Dit zijn JavaScript expressions die we plaatsen tussen {{}}. We kunnen ze gebruiken bij de gewone inhoud maar ook bij attributen en directives. AngularJS zal tijdens het compileren deze expressions opsporen enervoor zorgen dat ze telkens opnieuw geëvalueerd worden zodra een waarde wijzigt die voorkomt in de expression. Dit zorgt voor een dynamisch gedrag.

We zullen dit illustreren met een eenvoudig voorbeeld van een rekenmachine. De HTML-template ziet er als volgt uit:

<!DOCTYPE html><html data-ng-app><head><meta charset="UTF-8"><title>Calulator</title></head><body>

<input type='number' data-ng-model="value1" /> + <input type='number' data-ng-model="value2" /> = {{value1 + value2}}<script src="js/angular.js"></script>

</body></html>

We hebben twee invoervelden die gekoppeld zijn aan twee variabelen uit het Model. Deze variabelen gebruiken we vervolgens in de expression om de som te berekenen. Telkens we de inhoud van een van de invoervelden wijzigen, zal ook de inhoud van de expression wijzigen. Op de achtergrond heeft AngularJS aan de twee invoervelden event handlers gekoppeld die telkens de waarde van de variabele aanpassen en die er tevens voor zorgen dat alle expressions die deze variabelen gebruiken, opnieuw geëvalueerd worden. Dit is dusweer een illustratie van de dubbele binding tussen View en Model.

We hebben hier dus twee variabelen impliciet aan het Model toegevoegd en gebruikt. Later zullen we meer vertellen over dit Model. Om dergelijke variabelen een initiële waarde te geven kunnen we gebruik maken van het directive data-ng-init dat we toevoegen aan detag die ook het directive data-ng-app bevat. Hier kunnen we eventueel bepaalde variabelen reeds declareren en een initiële waarde geven. We merken op dat dit niet altijd deaangewezen methode is maar op dit moment volstaat het.

<html data-ng-app data-ng-init="value1=0;value2=0">

Om meerdere variabelen te initialiseren, kunnen we deze gewoon scheiden door een;-teken.



Expressions

Indien we in een expression een variabele gebruiken die niet gedefinieerd is of die de waarde null bevat, zal dat niet resulteren in een vervelende foutmelding. Er wordt dan gewoon niets getoond. De fout wordt als het ware vergeven (forgiven). Dit is handig omdat variabelen soms nog geen waarde hebben en het is dan ook niet nodig allerlei constructies te voorzien om dit tijdelijk probleem op te vangen.

Tenslotte willen we ook nog opmerken dat het dynamisch evalueren van expressions toch wel de nodige processortijd vraagt. Indien het gaat om gegevens die slechts één keer berekend moeten worden, is het soms beter dit dynamisch gedrag uit te schakelen. Dit kunnen we doen met de techniek van de one time binding. Dat wil zeggen dat de expression na de eerste succesvolle evaluatie niet meer opnieuw geëvalueerd zal worden. Dit kan de algehele performantie van de toepassing ten goede komen. We doen dit door de expression te beginnen met ::.

We geven hier een eenvoudig voorbeeld van een webpagina waarbij we cm omrekenen in inch. De conversiefactor definiëren we als een variabele:

<!DOCTYPE html><html data-ng-app data-ng-init="factor=2.54;value=0"><head><meta charset="UTF-8"><title>Conversion</title></head><body>

<input type='number' data-ng-model="value" /> cm = {{value/factor}} inch <br/>

Conversion factor: {{::factor}}<script src="js/angular.js"></script>

</body></html>

De inhoud van deze factor willen we gebruiken bij de dynamische berekening maar we willenhem ook gewoon tonen. Voor dit laatste gebruiken we een expression met one time binding. De factor wijzigt immers niet en na de initiële evaluatie hoeft AngularJS geen tijd meer te besteden aan het telkens evalueren van deze expression.

Opdracht 2: Expressions gebruiken Maak een webpagina voor de berekening van het volume van een doos.



Filters

Hoofdstuk 3: Filters

We hebben nu geleerd hoe we dynamische waarden kunnen tonen met een expression. Soms willen we toch wat meer controle over de manier waarop zo'n waarde getoond wordt. Als we terug het voorbeeld van de conversie tussen centimeter en inch nemen, dan zien we dat de berekende waarde behoorlijk veel cijfers na de komma heeft.

Welnu, dit kunnen we aanpassen door filters te gebruiken. Een filter zal het resultaat van eenexpression nemen en omvormen tot iets nieuws. De algemene syntax van een filter ziet er als volgt uit:

{{expression | filter}}

Het resultaat van de expression wordt door de filter gestuurd en hetgeen uit de filter komt, wordt uiteindelijk getoond.

Het is tevens mogelijk meerdere filters aan elkaar te koppelen. Het resultaat van de ene filterzal dan verder door de tweede filter gaan en enkel het eindresultaat zal getoond worden.

{{expression | filter1 | filter2}}

Sommige filters hebben argumenten of parameters waarmee we de werking van de filter kunnen bepalen. Deze argumenten kunnen we als volgt opgeven:

{{expression | filter:argument1:argument2:...}}

In de onderstaande tabel geven we een overzicht van de beschikbare filters.

Filter Beschrijving

currency:symbol:fraction Formatteert een getal in geldwaarde. De munt komt overeen met de lokale instellingen.

symbol: muntsymbool (optioneel).

fraction: aantal cijfers na de komma (optioneel).

date:format:timezone Formatteert een Date-object in een bepaalde weergave.

format: formattering (optioneel).

timezone: Tijdszone (optioneel).

filter:expression:comp Filtert een array en geeft een nieuwe array terug met enkel de waarden die aan de voorwaarden voldoen.



Filters

Filter Beschrijving

expression: expression met het criterium voor de selectie van waarden.

comp: comparator-functie.

json:spaces Formatteert een object naar JSON-formaat.

spaces: Het aantal spaties voor de indentatie (optioneel).

limitTo:limit:begin Maakt een nieuwe array of string met enkel het opgegeven aantal elementen.

limit: Het aantal elementen.

begin: De startindex (optioneel).

lowercase Zet een tekenreeks om naar kleine letters.

number:fraction Formatteert een getal.

fraction: Het aantal cijfers na de komma (optioneel).

orderBy:expression:reverse Sorteert een array volgens de opgegeven volgorde.

expression: expression met de opgegeven volgorde.

reverse: geeft aan dat de volgorde omgekeerd moet zijn.

uppercase Zet een tekenreeks om naar hoofdletters.

Tabel 1Filters

Een gedetailleerde uitleg van deze filters kan men vinden in de API-documentatie van AngularJS: https://docs.angularjs.org/api/ng/filter .

We zullen hier het gebruik van enkele filters illustreren. Vooreerst het voorbeeld met de conversie tussen centimeter en inch. We gebruiken hiervoor de filter number:


<input type='number' data-ng-model="value" /> cm = {{value/factor | number:2}} inch <br/>Conversion factor: {{::factor | number:2}}<script src="js/angular.js"></script>

</body></html>

Het resultaat:



https://docs.angularjs.org/api/ng/filter

Filters

We zien hier onmiddellijk iets dat best vervelend is: getallen worden geformatteerd volgens de Angelsaksische regels: namelijk met een decimaal punt in plaats van een komma.

We kunnen dit probleem oplossen door gebruik te maken van de extra mogelijkheden voor Internationalization (i18n) en Localization(l10n). AngularJS beschikt over bijkomende scripts die de regels voor een bepaalde taal en plaats bevatten. Voor het Nederlands is dat het script angular-locale_nl.js dat we makkelijk kunnen afhalen op de website.

We voegen nu dit script toe:


<input type='number' data-ng-model="value" /> cm = {{value/factor | number:2}} inch <br/>Conversion factor: {{::factor | number:2}}<script src="js/angular.js"></script>

<script src="js/angular-locale_nl.js"></script> </body></html>

Het resultaat is dan als volgt:

In het volgende voorbeeld maken we gebruik van een reeks van objecten die de gegevens van personen bevatten. We zullen deze reeks sorteren volgens naam en volgens leeftijd (omgekeerd) en tevens enkel de twee oudste personen tonen:

<!DOCTYPE html><html data-ng-app

data-ng-init="persons=[{name:'John', age:21}, {name:'Alice', age:28}, {name:'Fred', age:35}, {name:'Jill', age:40}]"><head>



AngularJS - noelvaes.eu · framework: AngularJS. De nodige informatie over dit framework is te...

Documents

Transcript of AngularJS - noelvaes.eu · framework: AngularJS. De nodige informatie over dit framework is te...