Your SlideShare is downloading. ×
Beginner workshop to angularjs presentation at Google
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beginner workshop to angularjs presentation at Google

2,100

Published on

Ari Lerner gave this workshop at Google's AngularJS developer meetup group in Mountain View. It's a beginner's guide to AngularJS

Ari Lerner gave this workshop at Google's AngularJS developer meetup group in Mountain View. It's a beginner's guide to AngularJS

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,100
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BEGINNER WORKSHOP TO ANGULARJS
  • 2. WHO AM I? ARI LERNER, FULLSTACK.IO Author of ng-book and ng-newsletter Author of a few others (D3 on Angular, Riding Rails with AngularJS) Teacher at HackReactor, General Assembly Co-founder of Fullstack.io Background in distributed computing and infrastructure
  • 3. NG-BOOK.COM
  • 4. TOOLS
  • 5. TEXT EDITOR Sublime Text 2/3 Textmate Vim Emacs
  • 6. WEB BROWSER Chrome Firefox Safari
  • 7. WEB SERVER Python $pto - SmlHTSre 80 yhn m ipeTPevr 00 #o r $tit -owb-pt . wsd n e -ah
  • 8. WEB SERVER NodeJS $nmisalht-evrp ntl tpsre g $ht-evr. - 80 tpsre / p 00
  • 9. WEB SERVER Golang pcaemi akg an ipr ( mot "m" "o" "e/tp ft; lg; ntht" ) fn mi( { uc an) ftPitn"evn tecretdrcoyo pr 88" m.rnl(Srig h urn ietr n ot 00) ht.ade"" ht.ieevrht.i(.)) tpHnl(/, tpFlSre(tpDr"") er: ht.itnnSre"88" nl r = tpLseAdev(:00, i) i er! nl{ f r = i lgFtl"itnnSre " er o.aa(LseAdev: , r) } }
  • 10. WEB SERVER Serve the current directory
  • 11. FLICKR API KEY
  • 12. BUILDING OUR FIRST APP Enter a name here HELLO, !
  • 13. DEMO <tln-p> hm gap <ed ha> <il>et/il> tteTs<tte <ha> /ed <oy bd> <nu tp=tx"n-oe=yuNm"paeodr"ne anm hr" ipt ye"et gmdl"orae lchle=Etr ae ee> <3Hlo{ yuNm }!/3 h>el { orae }<h> <cit srp sc"tp:/jxgolai.o/jxlb/nuaj/..2aglrmnj" r=hts/aa.ogepscmaa/isaglrs121/nua.i.s> <srp> /cit <bd> /oy <hm> /tl
  • 14. n-p gap n-oe=yuNm" gmdl"orae { yuNm } { orae }
  • 15. DEFINE AN APPLICATION
  • 16. DEFINE A MODULE / Ste / etr aglrmdl(mAp,[) nua.oue'yp' ]; / Gte / etr aglrmdl(mAp) nua.oue'yp'
  • 17. INVOKING OUR APPLICATION ng-app
  • 18. INVOKING OUR APPLICATION <tl hm> <ed ha> <cit srp sc"tp:/jxgolai.o/jxlb/nuaj/..2aglrmnj" r=hts/aa.ogepscmaa/isaglrs121/nua.i.s> <srp> /cit <ha> /ed <oyn-p=mAp> bd gap"yp" <- Apiainrn fo hr -> !- plcto us rm ee <bd> /oy <hm> /tl
  • 19. INVOKING OUR APPLICATION <tl hm> <ed ha> <cit srp sc"tp:/jxgolai.o/jxlb/nuaj/..2aglrmnj" r=hts/aa.ogepscmaa/isaglrs121/nua.i.s> <srp> /cit <ha> /ed <oyn-p=mAp> bd gap"yp" <- Apiainrn fo hr -> !- plcto us rm ee <bd> /oy <hm> /tl bd.gp(mAp) oynAp'yp';
  • 20. DIRECTIVE?!??
  • 21. DIRECTIVES ARE FUNCTIONS fnto symg { ucin a(s) aet"i"+mg; lr(H s) }
  • 22. ...RUN ON ELEMENTS fnto symg { ucin a(s) aet"i"+mg; lr(H s) } <i sy"ol"<dv dv a=wrd>/i> Say
  • 23. BUILT-IN DIRECTIVES
  • 24. NG-CLICK <4Saei { sae}<h> h>tt s { tt }/4 <utnn-lc=sae=!tt"Cag sae/utn bto gcik"tt sae>hne tt<bto> STATE IS Change state
  • 25. NG-SHOW/NG-HIDE <utnn-lc=sae=!tt"Cag sae/utn bto gcik"tt sae>hne tt<bto> <i n-hw"tt" dv gso=sae> <4Imoto hdn we tesaei tu<h> h>' u f iig hn h tt s re/4 <4Wee<h> h>eee/4 <dv /i> <i n-ie"tt" dv ghd=sae> <4BO<h> h>O!/4 <4Imol soigwe tesaei nttu<h> h>' ny hwn hn h tt s o re/4 <dv /i> Change state BOO! I'M ONLY SHOWING WHEN THE STATE IF NOT TRUE
  • 26. NG-MODEL <nu n-oe=nm"tp=tx"paeodr"ne yu nm"/ ipt gmdl"ae ye"et lchle=Etr or ae > <4{ nm }<h> h>{ ae }/4 Enter your name
  • 27. NG-REPEAT <ln-nt"ae='r' 'nn' '' 'ob'" u gii=nms[Ai, Aad, Q, Cly]> <in-eet"aei nms>{nm }<l> l grpa=nm n ae"{ ae }/i <u> /l Ari Anand Q Colby
  • 28. EXPRESSIONS Angular expressions are similar to JavaScript and can be thought of like it. <i> +2={ 1+2}<dv dv1 { }/i> < n-lc=cut=cut+1>d oet tecut/> a gcik"on on "Ad n o h on<a
  • 29. EXPRESSIONS ng. thi ood can be thought Angular expressions are similar to JavaScript and ag of like it.ich is h ,w ors <i> +2={ 1+2}<dv dv1 { }/i> err t t e c u t / > < n-lc=cut=cut+1>d oe o h on<a a gcik"on on "Ad n row h 't t on d ey Th
  • 30. SCOPES Expressions have access to the variables inside the parent scope
  • 31. DOING STUFF
  • 32. AND WHAT ABOUT THE JAVASCRIPT?
  • 33. SCOPES The $ c p object is the glue between our JavaScript and our soe view (HTML). <2Wloebc { ue.ae}<h> h>ecm ak { srnm }/2
  • 34. SCOPES ed? The $ c p object is the glue between fin JavaScript and our soe de our e m view (HTML). a n . r e s < 2 W l o e b c { u e . a e } <u h>ecm ak { srnm }/2 h> e is her W
  • 35. $SCOPE $cp.sr={ soeue nm:'r' ae Ai } ;
  • 36. SCOPES ARE JUST POJOS / Cet vrals / rae aibe $cp.esg ='el' soemsae Hlo; / o ojcs / r bet $cp.sr={ soeue nm:'r' ae Ai } ; / Dfn fntos / eie ucin $cp.a =fnto(s){ soesy ucinmg aet$cp.esg +""+mg; lr(soemsae s) }
  • 37. $ ? Just a name...
  • 38. e? nam a $ s in ? at' Wh a name... Just
  • 39. VIEW <2{ msae}<h> h>{ esg }/2 <3Wloebc { ue.ae}<h> h>ecm ak { srnm }/3 <uto n-lc=sy"ol"'Syhlo/uto> bttn gcik'a(Wrd)>a el<bttn HELLO WELCOME BACK ARI Say hello
  • 40. HOW TO GET ACCESS TO THE $ C P SOE
  • 41. CONTROLLERS A controller is a piece of code that defines functionality for a part of the page. Controllers are like mediators of functionality for portions of the page. <i n-otolr"dCnrle" dv gcnrle=Adotolr> <3Cuti a:{ cut}<h> h>on s t { on }/3 < n-lc=adn("Adoe/> a gcik"dOe)>d n<a <dv /i>
  • 42. DEFINE A CONTROLLER aglrmdl(mAp,[) nua.oue'yp' ] .otolr'dCnrle' fnto(soe { cnrle(Adotolr, ucin$cp) / W hv acs t teHmCnrle' $cp / e ae ces o h oeotolrs soe $cp.on =0 soecut ; $cp.dOe=fnto( { soeadn ucin) $cp.on + 1 soecut = ; } }; )
  • 43. DATA Client-side applications are only as exciting as the data they contain.
  • 44. GETTING DATA $ t p a wrapper on the browser's XMLHttpRequest API. h t is $tp{ ht( mto:'E' ehd GT, ul 'tp/aifik.o/evcsrs' r: ht:/p.lcrcmsrie/et, prm:{ aas / Fik AIprmtr / lcr P aaees mto:'lcritrsigesgtit, ehd fik.neetnns.eLs' aiky aie, p_e: pKy fra:'sn, omt jo' njoclbc:1 osnalak } }; )
  • 45. XHR REQUESTS ARE ASYNC
  • 46. CALLBACKS $aa( .jx{ ul:'xml.o' r eapecm, tp:'E' ye GT, sces:fnto(aa { ucs ucindt) / Sces:! / ucs ) } , err fnto(esn { ro: ucinrao) / Fiue: / alr ( } } )
  • 47. CALLBACK HELL f.edi(ore fnto(r,fls { sradrsuc, uciner ie) i (r){ f er cnoelg'ro fnigfls '+er osl.o(Err idn ie: r) }es { le flsfrahfnto(ieae flIdx { ie.oEc(ucinflnm, iene) cnoelgflnm) osl.o(ieae g(ore+flnm)sz(uciner vle){ msuc ieae.iefnto(r, aus i (r){ f er cnoelg'ro ietfigfl sz:'+er osl.o(Err dniyn ie ie r) }es { le cnoelgflnm +':'+vle) osl.o(ieae aus apc =(auswdh/vle.egt set vle.it aushih) wdh.oEc(ucinwdh wdhne){ itsfrahfnto(it, itIdx hih =Mt.on(it /apc) egt ahrudwdh set cnoelg'eiig'+flnm +'o'+hih +''+hih) osl.o(rszn ieae t egt x egt ti.eiewdh hih)wiedsiain+''+wdh+''+flnm,f hsrsz(it, egt.rt(etnto w it _ ieae u i (r)cnoelg'ro wiigfl:'+er f er osl.o(Err rtn ie r) } ) }bn(hs) .idti) } } ) } ) } }; )
  • 48. PROMISES Rather than passing a callback function into the $ t p h t method to get called when the data returns, the $ t p h t object returns a promise.
  • 49. PROMISE API poie rms .hnfnto(aa { te(ucindt) / Cle we n err hv ocre wt dt / ald hn o ros ae curd ih aa } ) .ac(uciner { cthfnto(r) / Cle we a errhsocre / ald hn n ro a curd } ) .ial(ucindt){ fnlyfnto(aa / Cle awy,rgrls o teotu rsl / ald las eades f h upt eut } )
  • 50. USING $ T P HT aglrmdl(mAp,[) nua.oue'yp' ] .otolr'oeotolr,fnto(soe $tp { cnrle(HmCnrle' ucin$cp, ht) $cp.ePoo =fnto( { soegthts ucin) $tp{ ht( mto:'E' ehd GT, ul 'tp/aifik.o/evcsrs' r: ht:/p.lcrcmsrie/et, prm:{ aas / Fik AIprmtr / lcr P aaees mto:'lcritrsigesgtit, ehd fik.neetnns.eLs' aiky aie, p_e: pKy fra:'sn, omt jo' prpg:3 e_ae , njoclbc:1 osnalak } }.hnfnto(aa { )te(ucindt) $cp.hts=dt.aapoo.ht; soepoo aadt.htspoo }; ) } }; ) Get photos
  • 51. BUT WAIT A MINUTE How come we can even call the $ t p h t object? aglrmdl(mAp,[) nua.oue'yp' ] .otolr'oeotolr,fnto(soe $tp { cnrle(HmCnrle' ucin$cp, ht) }; )
  • 52. BUT WAIT A MINUTE How come we can even call the $ t p h t object? !??! aglrmdl(mAp,[) nua.oue'yp' ] c ic?p , $ t p { .otolr'oeotolr,fnto(soe ht) cnrle(HmCnrle' ucin$ ag M }; )
  • 53. DEPENDENCY INJECTION Anytime we rely on a library (%99.9999999999 of all code we write), it either: needs to find the dependency itself or needs to be handed the dependency
  • 54. DEPENDENCY INJECTION Angular handles this ugly process for us by making objects and injecting them for us when invoking the objects. aglrmdl(mAp,[) nua.oue'yp' ] .otolr'oeotolr,fnto(soe $tp { cnrle(HmCnrle' ucin$cp, ht) / Bcuew'enmdte / eas ev ae hm / $cp ad$tp / soe n ht / aglrwl poieteet orcnrle / nua il rvd hs o u otolr }; )
  • 55. REMEMBER OUR M D L ? OUE / te[ i als o mdl dpnece / h ] s it f oue eednis aglrmdl(mAp,[) nua.oue'yp' ];
  • 56. DEPENDENCY INJECTION naming matters order does not matter
  • 57. on? ati ific min DEPENDENCY INJECTION e dl namingnmatters ha to order does not matter w Ho
  • 58. p... hel can hat kt naming o bo matters w a does not matter order kno I DEPENDENCY INJECTION
  • 59. TEMPORARY $ C P OBJECTS SOE Controllers are temporary objects and hang around only while they are needed.
  • 60. SO HOW DO WE STORE DATA? For instance, how do we keep a user logged in through the lifecycle of our application?
  • 61. SERVICES Singleton objects that persist for the life-cycle of the application A container for like methods and data
  • 62. BUILT-IN SERVICES Like directives, Angular comes packed with services and providers (a special type of service) $tp ht $ieu tmot $ c (security) se $o lg $ q and more
  • 63. CREATING OUR OWN SERVICE aglrmdl(mAp) nua.oue'yp' .evc(Fik' fnto(ht){ srie'lcr, ucin$tp ti.ePoo =fnto( { hsgthts ucin) / Dfn gthts)fnto / eie ePoo( ucin } }; )
  • 64. CREATING OUR OWN SERVICE aglrmdl(mAp) nua.oue'yp' .atr(Fik' fnto(ht){ fcoy'lcr, ucin$tp rtr { eun gthts fnto( { ePoo: ucin) } } }; )
  • 65. CREATING OUR OWN SERVICE aglrmdl(mAp) nua.oue'yp' .rvdr'lcr,fnto( { poie(Fik' ucin) vraie ='; a pKy ' ti.eAie =fnto(e){ hsstpKy ucinky rtr aie =ky| aie; eun pKy e | pKy } ti.gt=fnto(ht){ hs$e ucin$tp ti.ePoo =fnto( {; hsgthts ucin) } rtr ti; eun hs } }; )
  • 66. CREATING OUR OWN SERVICE The p o i e ( is the only type of service we can use in the rvdr) c n i ( block as [ a e P o i e ofg) Nm]rvdr aglrmdl(mAp) nua.oue'yp' .ofgfnto(lcrrvdr { cni(ucinFikPoie) FikPoie.eAie(KY) lcrrvdrstpKy'E'; }; )
  • 67. CONFIG() The c n i ( function runs before our app is running and let's ofg) us set up the app.
  • 68. RUN() The r n ) u ( function is the first function to get run before any other part of our app.
  • 69. USING OUR SERVICE Just like using Angulars! aglrmdl(mAp) nua.oue'yp' .otolr'oeotolr,fnto(soe Fik){ cnrle(HmCnrle' ucin$cp, lcr Fik.ePoo( lcrgthts) .hnfnto(aa { te(ucindt) $cp.hts=dt.hts soepoo aapoo; }; ) }; )
  • 70. NEVER USE THE $ T PIN A CONTROLLER HT
  • 71. WHY?
  • 72. WHAT ABOUT MULTIPLE PAGES?
  • 73. ROUTING
  • 74. INSTALLATION <tln-p> hm gap <ed<ha> ha>/ed <oy bd> <cit srp sc"tp:/jxgolai.o/jxlb/nuaj/..2aglrmnj" r=hts/aa.ogepscmaa/isaglrs121/nua.i.s> <srp> /cit <cit srp sc"tp:/jxgolai.o/jxlb/nuaj/..2aglrruemnj" r=hts/aa.ogepscmaa/isaglrs121/nua-ot.i.s> <srp> /cit <bd> /oy <hm> /tl
  • 75. INSTALLATION / Tl orAglrapo tenw / el u nua p f h e / nRuemdl dpnec / got oue eedny aglrmdl(mAp,[nRue] nua.oue'yp' 'got')
  • 76. LAYOUTS We can now define our routes, but where how will they show up on the page?
  • 77. LAYOUTS We can now define our routes, but where how will they show up on the page? <oy bd> <edrHae<hae> hae>edr/edr <i n-iw">/i> dv gve="<dv <otrFoe<foe> foe>otr/otr <bd> /oy
  • 78. LAYOUTS nRue g o t switches the child element of the n V e directive. giw
  • 79. DEFINING ROUTES The n R u e g o t module provides us with a new provider where we'll define routes called the $ o t P o i e . ruervdr aglrmdl(mAp) nua.oue'yp' .ofgfnto(ruervdr { cni(ucin$otPoie) / Cniueorrue hr / ofgr u ots ee }; )
  • 80. DEFINING ROUTES: WHEN() The w e ( method allows us to define a route and a route hn) configuration object. aglrmdl(mAp) nua.oue'yp' .ofgfnto(ruervdr { cni(ucin$otPoie) $otPoie ruervdr .hn'' { we(/, tmltUl 'epae/oehm' epaer: tmltshm.tl, cnrle:'oeotolr otolr HmCnrle' } ) }; )
  • 81. DEFINING ROUTES: OTHERWISE() The o h r i e ) t e w s ( method defines a catch-all route if no other route matches: aglrmdl(mAp) nua.oue'yp' .ofgfnto(ruervdr { cni(ucin$otPoie) $otPoie ruervdr .tews( ohrie{ rdrcT:'' eieto / } ) }; )
  • 82. TESTING
  • 83. TESTING Gives us assurance our code works as expected Allows for confidence with application deployment Knowledge transfer and maintainability ...
  • 84. UNIT TESTING Based off Jasmine syntax, Angular's Karma test runner runs our tests in a headless browser in several different browsers, such as Chrome, Safari, and PhantomJS.
  • 85. UNIT TESTING Focuses on testing small, atomic pieces of functionality. dsrb(Ui cnrles ' fnto({ ecie'nt otolr: , ucin) / Mc temApmdl / ok h yp oue bfrEc(oue'yp') eoeahmdl(mAp); dsrb(HmCnrle' fnto( { ecie'oeotolr, ucin) / Lclvrals / oa aibe vrHmCnrle,soe a oeotolr cp; bfrEc(net eoeahijc( fnto(cnrle,$otcp){ ucin$otolr roSoe / Cet anwcidsoe / rae e hl cp soe=$otcp.nw) cp roSoe$e(; HmCnrle =$otolr'oeotolr,{ oeotolr cnrle(HmCnrle' $cp:soe soe cp }; ) }) ); i(sol hv nm st,fnto( { t'hud ae ae e' ucin) epc(cp.ae.oeeie(; xetsoenm)tBDfnd) }; ) }; ) }; )
  • 86. UNIT TESTING Do it.
  • 87. ife. l ur yo ave ill s w , it y usl Do it. o eri S UNIT TESTING
  • 88. END-TO-END TESTING Instead of clicking the browser trying to mimic our user's actions...
  • 89. E2E TESTING Karma's test runner
  • 90. tor c tra Pro Karma's test runner E2E TESTING
  • 91. PROTRACTOR Protractor is an end-to-end test framework built off the WebDriverJS browser automation framework.
  • 92. END-TO-END TESTING OUR PAGE dsrb(pg la' fnto( { ecie'ae od, ucin) vrln; a ik bfrEc(ucin){ eoeahfnto( ln =eeetb.s(.edru l:t-hl()); ik lmn(ycs'hae l inhcid2') ln.lc(; ikcik) }; ) i(sol nvgt t te/bu pg' fnto( { t'hud aiae o h aot ae, ucin) epc(rwe.eCretr()tMth//bu/; xetbosrgturnUl).oac(aot) }; ) }; )
  • 93. THANK YOU
  • 94. NG-BOOK.COM 630+ page book with all this information and much much more. The only constantly updating book available for Angular today.
  • 95. ADDENDUM (JUST IN CASE)
  • 96. CONTROLLERS HANDLE BUSINESS LOGIC <i n-otolr"dCnrle" dv gcnrle=Adotolr> <3Cuti a:{ cut}<h> h>on s t { on }/3 < n-lc=adn("Adoe/> a gcik"dOe)>d n<a <dv /i> COUNT IS AT: 0 Add one

×