9789059407879

Inhoud

1KennismakenmetAngularJS1

WatisAngularJS?2

Librariesenframeworks2

OmschrijvingvanAngularJS3

AngularJSopinternet5

VersiesvanAngularJS6

AngularJSindepagina7

AngularJS-concepten8

Client-sidedHTMLtemplates8

Databinding9

Dependencyinjection10

Directives12

Customdirectives13

Benodigdevoorkennis14

Tipsvoormeerlezen15

Deontwikkelomgevinginrichten15

Editorenbrowser15

Eenwebserver16

Anderetools18

Debugging20

Oefenbestandendownloaden22

Conclusie22

Praktijkoefeningen23

2BeginnenmetAngularJS27

EenAngularJS-paginasjablooninstellen28

Directiveng-app29

Notatiewijzenvoordirectives30

Helloworld31

ng-model31

Meeroverng-model32

ng-true-valueenng-false-value33

Dedirectiveng-repeat35

Notatievanng-repeat37

Ng-repeatbijobjecten37

Gegevensfilteren39

uppercaseenlowercase39

orderBy40

Omgekeerdsorteren41

Gegevensfilteren42

Filterenopveldnaamvanobject43

Resultaatnietgevonden–ng-if44

Overigefilters45

Conclusie45

Praktijkoefeningen46

3Modulesencontrollers49

Watiseenmodule?50

Modulealssetterenalsgetter52

Dependencies53

Watiseencontroller?55

Dedirectiveng-controller56

Watis$scope?56

Eencontrollerdefiniëren57

Decoderefactoren59

Functiesschrijvenindecontrollerendedirectiveng-click61

Ng-clickbinnenng-repeat62

Meerkenmerkenvancontrollers64

Moduleencontrollerinapartebestanden65

Moduleinapp.js66

Controllerincontroller.js66

Anderesyntaxisomcontrollerstedefiniëren67

Minificationsafesyntaxis68

Benoemdefuncties69

Werkenmet$inject70

DecontrollerAs-syntaxis71

Wegmet$scope71

Varvmalsviewmodel71

Conclusie74

Praktijkoefeningen75

4RoutinginAngular-apps79

Kennismakenmetrouting80

SinglepageApplicationofSPA80

Routingalleenviahttp-server82

Routinginstalleren84

Ng-routeenui-router84

Moduleng-routedownloaden84

Dependencyaangeven85

Derouting-directiveng-view85

Werkenmet$routeProvider86

Parametersvoor.when()87

Eenpadconfigureren87

.otherwise()instellen88

Controllersmaken89

Viewsmaken89

InlineHTMLintemplate90

Samenvattingrouting91

Werkenmetrouteparameters91

Hetiddoorgeven92

Case:master/detailviewmetpersoonsgegevens93

Deviewsvoordeapp93

Directiveng-href95

Decontrollersvoordeapp95

Hetbestandapp.js97

Herhalingvanarraymetpersoonsgegevens?97

Conclusie98

Praktijkoefeningen99

5Gegevensvoorzieningmetfactoriesenservices101

Waaromservicesenfactories?102

Doelenvanservicesenfactories102

Singleton103

Dataflowindeapplicatie104

Factoryofservice?105

Eenfactorymaken106

Decontrolleraanpassen108

Detailgegevensophalenviadefactory109

Deviewaanpassen109

Dedetailviewschrijven109

DedetailControllerschrijven110

Gegevenstoevoegenviadefactory111

Nieuweviewtoevoegen111

Nieuwecontrollerschrijven112

Methode.addPerson()schrijven114

Eenservicemaken115

Methodesrechtstreeksopdefunctieschrijven115

Deserviceinjecteren116

Meerdatacomponenten:valueenconstant117

Hoofdlettergebruik118

Constantengebruikenineencontrollerenview119

Eenvaluegebruiken120 Conclusie122

Praktijkoefeningen123

6Livedataophalenmet$http125

Watdoet$http?126

Algemenewerkingvan$http126

$httpretourneertgeendata128

Json-bestandladenvanserver128

Persons.json129

Userinterfacemaken129

Module,controllerenfactorymaken130

Controllerimplementeren130

Factoryimplementeren131

Foutenafvangen132

Viewuitbreiden132

Controlleruitbreiden132

DemodulengSanitize134

LiveAPI’sopinternetgebruiken135

Dummypersoonsgegevensophalen135

Formaatvoorwerkenmetfilltext.com137

DeHTML-viewvoorpersoonsgegevens137

Decontrollermaken138

Defactorymaken139

Ajax-chainingmet.then()140

OpeenvolgendeAjax-calls141

Structuurvan.then()142

Case:filmgegevensophalenviaOMDbAPI143

DeHTML-code143

Deappinstellen144

Decontrollerinstellen145

DemovieServicemaken146

Gegevenstonen148

Case:gerelateerdefilmsophalen148

HTML-codeuitbreiden149

Constanteaanpassen149

Controlleruitbreiden150

Deserviceuitbreiden151

Verdergaanmet$http,promisesen$q153

Errorhandlingin.then()153

Promisesen$q153

MeerAPI’sommeeteexperimenteren156

RegistrerenvoorAPIkey156

OpenAPI’s156

Conclusie157

Praktijkoefeningen158

7Meerstandaarddirectives161

DirectivesvoorDOM-manipulatie162

ng-showenng-hide163

ng-if 164

CSS-klassenbeherenmetng-class165

ng-hrefenng-src169

Directivesvooreventhandling170

Ng-click170

Deparameter$event171

Ng-mousedown,ng-mouseupenandere172

Ng-keypress173

Ng-paste175

Directivesvoorformulieren176

Ng-submit176

Selectielijstenmaken178

Ng-change179

For-in-notatievoorobjecteninselectielijst179

Ng-focusenng-blur181

Ng-checked182

Overigedirectives183

Ng-cloak183

Ng-copy,ng-cutenng-paste185

Ng-disabled185

Conclusie186

Praktijkoefeningen187

8Customdirectivesschrijven189

Beginnenmetcustomdirectives190

Eenklokjemakenindepagina191

NaamgevingvandirectivesinHTMLenJavaScript192

Deklokfunctionaliteitgeven193

HetDirectiveDefinitionObject(DDO)195

OpdrachteninhetDDO195

Isolatedscopecreërenineendirective197

Badpractice198

ScopeisolerenviahetDDO199

Gegevensalsattributendoorgeven200

Controllervandedirectiveaanpassen202

Onafhankelijkemodulemakenvandedirective203

DOM-manipulatiedirectives204

HetDDOuitbreiden205

WerkenmetjqLite206

Waardenvanattributenbenaderen207

Case:eenjQuery-plug-inineenAngularJS-directivegebruiken209

PopovervanTwitterBootstrapenjQuery209

HTML-codeschrijven210

Directive-moduleschrijven210

Defunctielinkvoordedirectiveschrijven211

Dedirectiveinjecteren212

HTML-codeschrijvenomdedirectivetegebruiken212

Conclusie213

Kant-en-klarecustomdirectivesvindenengebruiken214

VerdergaanmetAngularJS215

Conclusie217

Praktijkoefeningen219

Kennismaken metAngularJS

VanenkeleeenvoudigeHTML-pagina’sinhetbeginvandejarennegentig ishetwebuitgegroeidtoteenvandemeestcomplexesystemendiewe kennen.Internetwordtgebruiktvoorrelatiefeenvoudigehobbysites, maarookvooronlinebetaalsystemen,CRM-enklantbeheersystemen, verzekerings-enschademodellen,socialemediaenontelbareandere zaken.AngularJSbiedteenframeworkvoorhetprogrammerenvan dergelijkeingewikkeldewebapps.Erzijnconcepteninverwerktdiehet mogelijkmakencodeenstructuurvanelkaartescheiden,modulairte programmerenenbovendiengoedtestbareapplicatiestemaken.Dit boekgeefteeninleidingopaldezezaken,zodatunaafloopvolvertrouwenaandeslagkuntmetuweigenAngularJS-applicaties.

Indithoofdstuk:

WatAngularJSis,enwathetnietis.

AngularJS-concepten.

Benodigdevoorkennisensoftware.

KenmerkenvanAngularJS-apps.

WatisAngularJS?

HetaloudeHTMLisprimaomgegevensgestructureerdtetonen indebrowser,maarisoorspronkelijknooitontwikkeldvoorhet makenvandynamischewebapplicaties.VoordatdoelisJavaScriptrond1995ontworpenensamenmetCSS(datrond dezelfdetijdopkwam)toegevoegdaandetoolboxvandewebdeveloper.JavaScriptwasinhetbeginlastigtelerenenverschillendebrowsershaddenelkeenverschillendeimplementatievan JavaScript.

Librariesenframeworks

PassindsdeopkomstvanaanvullendebibliothekenalsjQueryin 2006heeftJavaScripteenenormevluchtgenomen.Behalve jQueryzijntalvananderebibliothekenontwikkeld,elkmethun eigendoel.ErzijnlibrariesvoorDOM-manipulatie(zoalsjQuery), routing(sammy.js),databinding(knockout.js)ennogveelmeer.

MaarAngularJSisgeenlibraryzoalsdehiervoorgenoemde. AngularJSiseencompleet framework voorhetrealiserenvan client-sidedwebapplicaties.Alswedezakenergvereenvoudigd voorstellen,kunjezeggendatlibrariesinhetalgemeenéénding heelgoeddoen.EenframeworkzoalsAngularJSbiedtoplossingen vooralleniveausvanapplicatieontwikkeling.Vanhetstructureren enbindenvandata,totAjax-communicatiemetwebservers,het verwerkenvangeretourneerdegegevensineenclient-sideddatamodelenhetmakenvanherbruikbarecomponenten.

Librarieskunneninhetalgemeenwordengecombineerdineen projectomgezamenlijkhetbesteresultaattebereiken.Bijframeworksmaakjedaarentegenéénkeuzeenbouwjedeappvolgens derichtlijnenenkenmerkenvanhetgekozenframework.

Geencombinaties

Wezullenindepraktijkbijvoorbeeldnooitzien dateenapp zowel AngularJSalsDurandal(een alternatiefframework)gebruikt.OokcombinatiesvanAngularJSmetEmber(eenanderalternatief)komennietvoor.Jebouwtdesiteofwel inAngularJS,ofwelinDurandal.Nietinbeide.

OmschrijvingvanAngularJS

HetAngular-frameworkwordtopdeofficiëlesiteomschrevenals:

“AngularJSletsyouwriteclient-sidewebapplicationsasifyouhad asmarterbrowser.Itisastructuralframeworkforcreatingdynamicwebapps.”

MetAngularJSishetrelatiefeenvoudigomcomplexewebapplicatiesteschrijven,omdathetframeworkalshetwareeen abstractielaagbiedttussendebrowser,delogicavandeappen dedatawaarmeewordtgewerkt.Vanoudsherwordtditvaak aangeduidmetdeterm MVC,van Model-View-Controller,maar ditwordtlangzamerhandeenbeetjelosgelaten.Alsutochdeze vergelijkingnogwiltmaken:

• Model Dedatadiedeapplicatiebinnenkomt(meestaluit eendatabase,viaeenAjax-call)heefteenbepaaldestructuur enwordthet‘model’genoemd.

• Controller Delogicaindeapplicatiebewerktdatainhet model.Hetvoegtbijvoorbeeldlosseveldenals firstname en lastname samentoteenveld fullname datindeuserinterface wordtgetoond.Dezelogicastaatineencomponentdie ‘controller’wordtgenoemd.

• View DeuserinterfacebestaatuitHTML-templateswaarin de–eventueelbewerkte–gegevenswordengetoond.Het HTML-templateisdaarmeede‘view’vandeapplicatie.Een appkannatuurlijkveleviewshebben.Vanhettonenvande homepagetotmaster-detailviews.

AngularJSisdaarmeeeencompleetclient-sidedMVC-framework. HetisvollediginJavaScriptgeschrevenendraaitookvolledigin debrowser.Idealiterisdeappcompleetlosgekoppeldvandeserverendatabasewaardegegevensvandaankomen.AllecommunicatievindtplaatsviaAjax-calls.Uiteraardgaanwehierlaterin ditboeknogdieperopin.

Geen‘MVC’meer

HetbegripMVComdearchitectuurvoor AngularJSaanteduidenwordtlangzamerhand mindergebruikt.DeterminologievanMVCzou testriktzijnennietgoedpassenbijdeflexibiliteitvanAngularJS.Alsueerderhebtgewerkt metMicrosoft-technologieënalsSilverlightof XAML,kentumisschienhetbegrip MVVM (Model-View-ViewModel).Ookditistevertalen naareenAngularJS-structuur.Anderedesign patternszijnbijvoorbeeld Model-View-Adapter en Model-View-Presenter.Omdieredenwordt AngularJSnuookwelbenoemdalseen MV*-framework(Model-View-Whatever).De begrippencontrollerenviewzullenweechter zekernogtegenkomenbijhetmakenvan AngularJS-apps.

Afbeelding1.1 DehomepagevanAngularJS.Starthiervoorofficiëledownloads,documentatieen meer.

AngularJSopinternet

DehomepagevanAngularJSistevindenop angularjs.org.Hier kuntuhetframeworkdownloaden,onlinetutorialsvolgen,deelnemenaandiscussies,video’sbekijkenvandediverseAngularJSconferentiesenmeer.Ookisdithetstartpuntvoordeofficiële documentatie.Kieshiervoordeoptie Develop, APIReference uit hethoofdmenu,ofvoeg docs.angularjs.org/api directtoeaanuw favorieten.

Wiltuhelemaalhardcoregaan,dankuntueeneigenversievan AngularJSbouwenviadeGithub-pagina.Ganaar github.com/ angular/angular.js omdebroncodetedownloaden,tebuildenen eventueelaantepassenvooreigengebruik.Inditboekmakenwe hiervangeengebruik.

VersiesvanAngularJS

AngularJSisrond2009ontstaanalsinternprojectbijGoogle. MiskoHevery(@mheveryopTwitter)isde‘vadervanAngular’. SamenmetprojectmanagerBradGreen(@bradlygreen)bouwde hijAngularJSuittotvolwaardigframeworkdatookdooranderen konwordengebruikt.Rond2011gafGooglehetframeworkonder deMIT-licensievrijalsopensource-software.Indeloopderjaren zijnverschillendeversienummersgebruikt.

• 0.9-1.1 Oktober2010–juni2012.Deeersteversiesdie voorhetalgemenepubliekbeschikbaarwaren.AllefunctionaliteitwasgebundeldinéénAngularJS-module.

• 1.2 November2013.Verbeterdeversiemetondermeeruitsplitsingvandeelfunctionaliteit(routing,animatie)naarlosse modules.

• 1.3 Oktober2014.Tallozebugfixes,performanceverbeteringenenenkelenieuweopties.

• 2.0 Eind2015?Ophetmomentvanschrijvenvanditboek wordtAngularJS2.0ontwikkeld.Hieroverisheftigediscussie gaandeopinternet.Angular2.0wordteencompleetnieuw frameworkengaattalloze breakingchanges bevatten,waardoorhetupgradenvan1.3naar2.0eenvrijwelonmogelijke zaakwordt.AngularJSzalcompleetopES6(devolgendeversie vanJavaScript)zijngebaseerd.

HetisnogonduidelijkhoehetpadnaarAngular2.0verderzalverlopen.Iniedergevalisdatgeenredenomnunietalvastkenniste makenmetdit‘superheroicframework’,zoalsAngularzichzelf enigszinsspottendomschrijft.DeconceptenuitAngular1.3 (modules,directives,views,dependencyinjection)zullengelijk zijn,deimplementatiewordtin2.0echtercompleetanders,zois deverwachting.

Inditboek:AngularJS1.3

InditboekgebruikenweAngularJSversie1.3.3 uitnovember2014.Ditwasophetmomentvan schrijvendemeestrecentestabieleversie.

AngularJSindepagina

HetmakenvaneenAngularJS-applicatieiseenvoudig.Zorgervoor dathetscriptisgedownloadenineenmapvanuwwebsitestaat (wijgebruikendemap\js\vendor\angular).Daarnakuntuhet meteeneenvoudigeJavaScript-referentieinsluitenindepagina:

<scriptsrc="../js/vendor/angular/angular.js"></script>

Wiltuhelemaalniksdownloadenmaarrechtstreeksonlineontwikkelen,dankuntuookverwijzennaarAngularJSophetGoogle CDN.Eeneigenschapisdanuiteraardweldatualleenkuntontwikkelenalsuonlinebent:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>

Welkemethodeuookgebruikt,nahetinsluitenishetframework indepaginabeschikbaarenkuntuelkeAngular-opdrachtuitvoerendieuinditboektegenkomt.

AngularJS-concepten

EriseenaantalkernbegrippenwaaruinelkeAngular-appmeete makenkrijgt.Dezeconceptenzijngeenvanalleuitgevondendoor hetAngular-teamzelf,maargeleenduitdeandereontwikkelomgevingenendaarnameteenJavaScript-implementatietoegepastinhetframework.Indeloopvanhetboekkomenaldeze conceptenuiteraardaandeorde.Hiernoemenwealvastkortde belangrijkste.

Client-sidedHTMLtemplates

HebtuooitinjQuerymoeizaameenHTML-fragmentsamengesteldals $(‘#placeholder’).append(‘<span class="tip"> + data.tiptekst + ‘</span>’) enditdanvaaknogeenstukcomplexer?DanzultudefunctionaliteitvanHTML-templatesin AngularJSkunnenwaarderen.InAngularzijndedataentemplateswaaropdiedatawordentoegepast,vanelkaargescheiden. Detemplateskuntumetelkeeditorzelfschrijven(zoalsweindit boekdoen),ofopdeserverlatensamenstellendoorbijvoorbeeld PHP,ASP.NETMVCofJavaSpringendannaardebrowserzenden. DedatakomttypischviaeenAjax-callbinnenenwordtmetde doublecurlybraces gebondenaandetemplate.

EenvergelijkbarecodealshetjQuery-voorbeeldhiervoorzieter alsAngularHTML-templatebijvoorbeeldalsvolgtuit:

<spanclass="tip">{{data.tipTekst}}</span>

Hierbijis data eenJavaScript-object(hetmodel),dateeneigenschap tipTekst heeft.Ditwordtbinnen {{ … }} gebondenaande HTML-template(deview).Eenmeeruitgebreidetemplatezieter bijvoorbeelduitals:

<pclass="bookDetails">{{book.description}}</p>

<footer>

<pclass="bookTitle">{{book.title}}</p>

<pclass="bookAuthor">{{book.firstAuthorName}}</p>

</footer>

<imgng-src="{{imgSrc}}"alt="paginavan{{book.title}}}“/>

Databinding

IndeHTML-templatewordendedubbeleaccoladesgebruiktom gegevenstebinden.Alleswattussen {{ … }} staat,wordtdoor hetframeworkopgepiktengeëvalueerd.Deuitkomstervan wordtindeuserinterfacegeplaatst.Steldathetobject data uit devorigeparagraafdevolgendeinhoudheeft:

vardata={

tipTekst:‘Klikmetderechtermuisknopvoorextraopties’ }

EndeHTMLzieteruitals:

<spanclass="tip">{{data.tipTekst}}</span>

Danisdeuitvoerindebrowser(watdebezoekerziet):

<spanclass="tip">Klikmetderechtermuisknopvoorextraopties</span>

Hetwordtnatuurlijkextrakrachtigalsdedatabinding-expressies ineenluswordengeplaatst,ofintweerichtingenwerken.Dit wordtinAngular twowaydatabinding genoemd.Hetbetekent datwanneergegevensdoordebezoekerswordeningevuldof gewijzigd(bijvoorbeeldineenHTML-formulier)dezewijzigingen directwordendoorgegeveninhetmodel.UbeschiktinJavaScript dandirectovereenmodelwaarindegegevensaanwezigzijndie debezoekerheeftingevuld.Hetisnietnodig(opnieuwzoalsin jQuery)eersthetgewensteformulierveldteselecterenendaarvandehuidigewaardeuittelezen.Inhetvolgendehoofdstuk maaktutotindetailkennismetdatabinding.

Dependencyinjection

InAngularJS-applicatieskanfunctionaliteitwordengebundeldin eenmodule.Dezemodulekanvervolgenswordenhergebruikt (geïnjecteerd)inanderemodules.Ditprincipestaatbekendals dependencyinjection,of DI.

Ditbetekentdatcodeergflexibelwordt.Steldatweeencompleteunithebbengemaaktmettipsvooreenapplicatieenwe willendiezelfdetipsgebruikenineenandereapplicatie.Dankunnenwedetips-moduleinjecterenindenieuwemoduleenhoevenwegeencodetedupliceren.Hetspreektvoorzichdathetin demeestegevallendannietzalgaanomeeneenvoudigobject metstrings,maardatercompletefunctionaliteit,inclusieffunctiesenservercallskunnenwordengebundeld.

Hetsysteemvandependencyinjectionisergkrachtig.Vaakwordenafhankelijkhedenalsparametermeegegevenaaneenfunctie ofmodule.Angularzoektdanzelfdebetreffendemodulesopen voegtzein.Stelbijvoorbeelddatweeencontrollerschrijvendie gebruikwilmakenvandebasisAngularJS-services $http (voor Ajax-calls)en $location (voorwerkenmetdeadresregelinde browser).Danzieteenfunctiedefinitieerbijvoorbeeldalsvolgt uit:

StandaardAngularJS-services

BijDIkuntuzoweleigenservicesenmodules injecterenalsstandaardAngular-services.De standaardservicesherkentuaanhetdollarteken,zoals $scope, $http en $location.ZewordenstandaardmetAngularJSmeegeleverdenu hoeftzenietapartintevoegen.Hetdollarteken geeftniksspeciaalsaan,hetisgewooneendeel vandenaam.Zozijnzemakkelijkherkenbaar.