9/17/2015
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
tutorialzine
articles
newsletter
thebook
LearnAngularJSWithThese5Practical
Examples
MartinAngelov
Download
August30th,2013
Tweet
836
Like
Share
713
BynowyouveprobablyheardofAngularJStheexcitingopensourceframework,developedby
Google,[Link],butI
[Link]
[Link],Views,
Controllers,ServicesandFiltersexplainedin5practicalexamplesthatyoucaneditdirectlyinyour
[Link],grabthezipabove.
[Link]
1/8
9/17/2015
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
WhatisAngularJS?
Onahighlevel,AngularJSisaframeworkthatbindsyourHTML(views)toJavaScriptobjects
(models).Whenyourmodelschange,[Link]
model,associatedwithatextfield,[Link]
handlesallthegluecode,soyoudonthavetoupdateHTMLmanuallyorlistenforevents,likeyoudo
[Link],noneoftheexampleshereevenincludejQuery!
TouseAngularJS,youhavetoincludeitinyourpagebeforetheclosing<body>[Link]
recommendedforafasterloadtime:
<scriptsrc="[Link]
AngularJSgivesyoualargenumberofdirectivesthatletyouassociateHTMLelementstomodels.
[Link]
thatyouhavetoincludeinanypage,ifyouwishtouseAngular,is ngapp :
<bodyngapp>
Itshouldbeaddedtoanelementthatenclosestherestofthepage,likethebodyelementoran
[Link]
seesonitschildelements.
Enoughwiththetheory!Nowletsseesomecode.
[Link]
Asafirstexample,[Link]
onlyAngularsdirectives,[Link]
[Link]!
HTML
1
2
3
4
5
6
7
8
9
10
11
CSS
<!AddingthengappdeclarationtoinitializeAngularJS>
<divid="main"ngapp>
HOME
PROJECTS
SERVICES
CONTACT
<!Thenavigationmenuwillgetthevalueofthe"active"variableasaclass.
The$[Link]()stopsthepagefromjumpingwhenalinkisclicked.
<navclass="{{active}}"ngclick="$[Link]()">
Pleaseclickamenuitem
<!Whenalinkinthemenuisclicked,wesettheactivevariable>
<ahref="#"class="home"ngclick="active='home'">Home</a>
<ahref="#"class="projects"ngclick="active='projects'">Projects</
[Link]
2/8
9/17/2015
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
12
13
14
15
16
17
18
19
20
21
22
<ahref="#"class="services"ngclick="active='services'">Services</
<ahref="#"class="contact"ngclick="active='contact'">Contact</a>
</nav>
<!ngshowwillshowanelementifthevalueinthequotesistruthful,
[Link]
initially,thiswillcausethefirstparagraphtobevisible.>
<pnghide="active">Pleaseclickamenuitem</p>
<pngshow="active">Youchose<b>{{active}}</b></p>
</div>
EDIT
RUN
Inthecodeabove,[Link]
itchanges,[Link],this
[Link],andcanbeaccessedin
yourcontrollers(moreonthatinthenextexample).
IfyouhaveusedJavaScripttemplatesbefore,youarefamiliarwiththe {{var}} [Link]
frameworkseessuchastring,[Link]
everytimevarischanged.
[Link]
Forthesecondexample,wewillcreateasimpleinlineeditorclickingaparagraphwillshowatooltip
[Link]
[Link]
automaticallybyAngular,andwhichareassociatedwithyourpageusingthe ngcontroller directive:
HTML
1
2
3
4
5
6
7
8
9
10
11
12
JS
CSS
<!Whenthiselementisclicked,hidethetooltip>
<divid="main"ngappngcontroller="InlineEditorController"ngclick="hideTooltip()"
<![Link]
<divclass="tooltip"ngclick="$[Link]()"ngshow="showtooltip"
Editme.
<!ngmodelbindsthecontentsofthetextfieldwiththe"value"model.
Anychangestothetextfieldwillautomaticallyupdatethevalue,and
allotherbindingsonthepagethatdependonit.>
<inputtype="text"ngmodel="value"/>
</div>
[Link]
3/8
9/17/2015
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
13
14
15
16
17
<!CallamethoddefinedintheInlineEditorControllerthattoggles
theshowtooltipvariable>
<pngclick="toggleTooltip($event)">{{value}}</p>
</div>
EDIT
RUN
Whenthecontrollerfunctionisexecuted,itgetsthespecial $scope [Link]
[Link] ngmodel bindingonthetext
fieldtellsAngulartoupdatethatvariablewhenthevalueofthefieldchanges(thisinturnrerendersthe
paragraphwiththevalue).
[Link]
Inthisexample,wewillcodeanorderformwithatotalpriceupdatedinrealtime,usinganotheroneof
[Link]
pipecharacter | .Intheexamplebelow,Iamusingthecurrencyfilter,toturnanumberintoaproperly
formattedprice,[Link],asyouwill
seeinexample#4.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
JS
Services
CSS
<!DeclareanewAngularJSappandassociatethecontroller>
<formngappngcontroller="OrderFormController">
<h1>Services</h1>
WebDevelopment
$300.00
<ul>
<!Loopthroughtheservicesarray,assignaclickhandler,andsetor
removethe"active"cssclassifneeded>
<lingrepeat="serviceinservices"ngclick="toggleActive(service)"
Design
$400.00
<!Noticetheuseofthecurrencyfilter,itwillformattheprice>
{{[Link]}}<span>{{[Link]|currency}}</span>
</li>
</ul> Integration
$250.00
<divclass="total">
<![Link].
Total:<span>{{total()|currency}}</span>
Training
$220.00
[Link]
4/8
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
Training
$220.00
9/17/2015
18
19
20
</div>
</form>
Total:
$300.00
EDIT
RUN
The ngrepeat binding(docs)[Link]
[Link]
deleted.
Note:Foramorecompleteversion,seethistutorial,whichisbasedonthisone,writtenwith
[Link].
[Link]
[Link]
whereAngularshines,[Link],wefirst
havetoturnourapplicationintoamodule.
ModulesareawayoforganizingJavaScriptapplicationsintoselfcontainedcomponentsthatcanbe
[Link]
[Link]
dototurnyourappintoamodule:
1. Usethe [Link]("name",[]) [Link]
module
2. Passthenameofthemoduleasthevalueofthe ngapp directive.
Creatingafilterthenisassimpleascallingthe filter() methodonthemoduleobjectreturned
by [Link]("name",[]) .
HTML
1
2
3
4
JS
CSS
MakingaSuperSimpleRegistrationSystem
<!InitializeanewAngularJSappandassociateitwithamodulenamed"instantSearch"
WithPHPandMySQL
<divngapp="instantSearch"ngcontroller="InstantSearchController">
<divclass="bar">
Createaslideoutfooterwiththisneatzindex
[Link]
5/8
9/17/2015
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Createaslideoutfooterwiththisneatzindex
<!CreateabindingbetweenthesearchStringmodelandthetextfield>
trick
<inputtype="text"ngmodel="searchString"placeholder="Enteryoursearchterms"
</div>
HowtoMakeaDigitalClockwithjQueryand
<ul>
CSS3
<![Link]
thecustomsearchfilter"searchFor".Ittakesthevalueofthe
searchStringmodelasanargument.
>
SmoothDiagonalFadeGallerywithCSS3
<lingrepeat="iinitems|searchFor:searchString">
Transitions
<ahref="{{[Link]}}"><imgngsrc="{{[Link]}}"/></a>
<p>{{[Link]}}</p>
</li>
MiniAJAXFileUploadForm
</ul>
</div>
[Link]
EDIT
RUN
[Link],
[Link]
chaining.
[Link]
AnotherpopularUIinteractionisswitchingbetweendifferentlayoutmodes(gridorlist)withaclickofa
[Link],Iwillintroduceanotherimportantconcept
[Link],anAPI,
[Link],wewillwriteaservicethatcommunicateswithInstagramsAPI
andreturnsanarraywiththemostpopularphotosatthemoment.
Notethatforthiscodetowork,[Link]:
<scriptsrc="[Link]
ThisincludesthengResourcemoduleforeasilyworkingwithAJAXAPIs(themoduleisexposedasthe
$resourcevariableinthecode).Thisfileisautomaticallyincludedintheeditorbelow.
HTML
JS
CSS
[Link]
6/8
9/17/2015
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<divngapp="switchableGrid"ngcontroller="SwitchableGridController">
<divclass="bar">
<!Thesetwobuttonsswitchthelayoutvariable,
whichcausesthecorrectULtobeshown.>
<aclass="listicon"ngclass="{active:layout=='list'}"ngclick
<aclass="gridicon"ngclass="{active:layout=='grid'}"ngclick
</div>
<![Link]"layout"bind
<ulngshow="layout=='grid'"class="grid">
<!Aviewwithbigphotosandnotext>
<lingrepeat="pinpics">
<ahref="{{[Link]}}"target="_blank"><imgngsrc="{{[Link].low_resolution.u
</li>
</ul>
<ulngshow="layout=='list'"class="list">
<!Acompactviewsmallerphotosandtitles>
<lingrepeat="pinpics">
<ahref="{{[Link]}}"target="_blank"><imgngsrc="{{[Link]}}"
<p>{{[Link]}}</p>
</li>
</ul>
</div>
EDIT
RUN
Servicesareentirelyselfcontained,whichmakesitpossibletowritedifferentimplementationswithout
[Link],whiletesting,youmightprefertoreturnahardcodedarray
ofphotoswhichwouldspeedupyourtests.
FurtherReading
Ifyouvereachedthispoint,[Link],
[Link]
quest:
TheAngularJSHomePage
TheAngularJSGuide
TheOfficialAngularJSTutorial
[Link]
7/8
9/17/2015
LearnAngularJSWithThese5PracticalExamples|Tutorialzine
Alistoflotsandlotsofmoreresources,videosandtutorials
ANGULARJS
ArticleLicense
JAVASCRIPT
PrivacyPolicy
QUICKLEARN
ContactForm
Advertise
Tutorialzine20092015
[Link]
8/8
