This one page document discusses AngularJS and provides high-level summaries of its key features in 3 sentences or less: AngularJS is a JavaScript framework that uses two-way data binding, modules, templates, dependency injection and routing to build single page applications. It loads templates asynchronously and uses scopes to enable two-way data binding between controllers and views. Directives are central to AngularJS and allow extending HTML attributes and elements to create custom components.

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