Why is AngularJS so cool.

1. ONE PAGE APP WITH
adam.stipak@gmail.com | @new_POPE

2. WTF, WHICH TOOL I NEED ???
Backbone.js
Ember.js
Google Closure
Spine
jQuery (non FW)
Este.js (Is it not dead? ;-))
...
No thanks, AngularJS is cool ;-)

3. WHY ?
Bootstrapping
Module based
Templates
2-way data binding (It's fucking good)
Dependency Injection
Routing
Directives

4. BOOTSTRAPPING
Step 1:
<citsc"i/saglrmnj"<srp>
srp r=lbj/nua.i.s>/cit
Step 2:
<tln-p>
hm gap
Result:
{12}i 3
{+} s
I'm using this way (RequireJS)
vrap=aglrmdl(ap,[*dp *];
a p nua.oue'p' / es /)
aglrbosrpdcmn,[ap];
nua.otta(ouet 'p')

5. MODULE BASED
HTML
<tln-p=mAp>
hm gap"yp"
JS
vrmAp=aglrmdl(mAp,[) / N dp.
a yp nua.oue'yp' ]; / o es
/ Cleto o U drcie.
/ olcin f I ietvs
aglrmdl(uDrcie' [*.*];
nua.oue'iietvs, /../)
vrmAp=aglrmdl(mAp,[uDrcie')
a yp nua.oue'yp' 'iietvs];

6. TEMPLATES
<l
u>
<in-eet"tmi [wb,'lmn' '1'"
l grpa=ie n 'e' eeet, #4]>
{ie}
{tm}
<l>
/i
<dv
/i>
web
element
#14

7. WITH CONTROLLERS
JS
mApcnrle(Tmltsotolr,fnto(soe {
yp.otolr'epaeCnrle' ucin$cp)
$cp.tm =[wb,'lmn' '1';
soeies 'e' eeet, #4]
};
)
Template
<i n-otolr"epaeCnrle"
dv gcnrle=Tmltsotolr>
<pnn-eet"tmi ies>
sa grpa=ie n tm"
{ie}<ml>{idx}/ml>
{tm}sal{$ne}<sal
<sa>
/pn
<dv
/i>
Result
web 0 element 1 #14 2

8. ASYNC TEMPLATES
<i n-iw <- Ol oeo tepg ->
dv gve> !- ny n n h ae -
But, you can use this
<i n-nld=tmltsfohm"
dv gicue"epae/o.tl>
with nested levels ;-)
AngularJS loads the templates asynchronously.

9. 2-WAY DATA BINDING
Controller
$cp.nu =";
soeipt "
$cp.laIpt=fnto( {
soecernu ucin)
$cp.nu =";
soeipt "
};
Template
<nu n-oe=ipt>
ipt gmdl"nu"
<nu n-lc=cernu("tp=bto"vle"la!>
ipt gcik"laIpt) ye"utn au=Cer"
Result
Clear!
$scope.input = ""

10. HOW IT WORKS?
ONE WAY DATA BINGING

11. HOW IT WORKS?
TWO IS MORE THAN ONE, BRO

12. HOW IT WORKS?
SCOPES

13. DEPENDENCY INJECTION
Dependecny injector is better than Chuck N.
mApsrie'yevc' fnto( {*.*};
yp.evc(mSrie, ucin) /../)
mApcnrle(SmIesotolr,fnto(yevc){
yp.otolr'oetmCnrle' ucinmSrie
/ mSriewsatmtclyijce
/ yevc a uoaial netd
mSriegt'oept'.ucs(ucindt){
yevc.e(sm/ah)scesfnto(aa
$cp.tm =dt.tm;
soeies aaies
};
)
};
)

14. HOW IT WORKS?

15. ROUTING
$routeProvider
mApcni('ruervdr,fnto(r){
yp.ofg[$otPoie' ucin$p
$p
r
.hn'fo,{
we(/o'
tmltUl 'p/o.tl,
epaer: tlfohm'
cnrle:Footolr
otolr oCnrle
})
.tews(rdrcT:'br};
ohrie{eieto /a')
})
];

16. DIRECTIVES
It's all about directives.
mApdrcie'ldr,fnto( {
yp.ietv(sie' ucin)
rtr {
eun
ln:fnto(cp,eeet ats {
ik ucinsoe lmn, tr)
$eeet.ldr)
(lmn)sie(;
}
}
};
)
Value of slider: 5

17. and so much more on angularjs.org
Thanks for coming
@new_POPE | newpope.org