AngularJS workshop to introduce beginner concepts:
The presenter is Ari Lerner from Fullstack.io and teaches AngularJS. The workshop covers tools needed for Angular development like text editors, browsers, and web servers. It demonstrates building a simple greeting app with Angular directives, controllers, expressions, and scopes. Data handling with the $http service and promises is explained. Dependency injection allows services like $http to be passed into controllers. Services are introduced as singleton objects that can persist data beyond a single controller.
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
10. 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)
}
}
25. 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
26. 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
28. 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
29. 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
30. 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
34. 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
35. 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
37. 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)
}
42. 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>
43. 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 = ;
}
};
)
45. 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
}
};
)
48. 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)
}
}
)
}
)
}
};
)
49. 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.
50. 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
}
)
51. 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
52. 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)
};
)
53. 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
};
)
54. 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
55. 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
};
)
56. REMEMBER OUR M D L ?
OUE
/ te[ i als o mdl dpnece
/ h ] s
it f oue eednis
aglrmdl(mAp,[)
nua.oue'yp' ];
63. 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
64. 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
}
};
)
67. 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';
};
)
68. CONFIG()
The c n i ( function runs before our app is running and let's
ofg)
us set up the app.
69. RUN()
The r n )
u ( function is the first function to get run before any
other part of our app.
70. 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;
};
)
};
)
76. INSTALLATION
/ Tl orAglrapo tenw
/ el u nua p f h e
/ nRuemdl dpnec
/ got oue eedny
aglrmdl(mAp,[nRue]
nua.oue'yp' 'got')
77. LAYOUTS
We can now define our routes, but where how will they show up
on the page?
78. 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
79. LAYOUTS
nRue
g o t switches the child element of the n V e directive.
giw
80. 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
};
)
81. 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'
}
)
};
)
82. 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 /
}
)
};
)
84. TESTING
Gives us assurance our code works as expected
Allows for confidence with application deployment
Knowledge transfer and maintainability
...
85. 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.
86. 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)
};
)
};
)
};
)
97. 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