Your SlideShare is downloading. ×
0
ONE PAGE APP WITHadam.stipak@gmail.com | @new_POPE
WTF, WHICH TOOL I NEED ???   Backbone.js   Ember.js   Google Closure   Spine   jQuery (non FW)   Este.js (Is it not dead? ...
WHY ?BootstrappingModule basedTemplates2-way data binding (Its fucking good)Dependency InjectionRoutingDirectives
BOOTSTRAPPING                     Step 1:<citsc"i/saglrmnj"<srp> srp r=lbj/nua.i.s>/cit                     Step 2:<tln-p>...
MODULE BASED               HTML<tln-p=mAp> hm gap"yp"                JSvrmAp=aglrmdl(mAp,[) / N dp. a yp nua.oueyp ]; / o ...
TEMPLATES<l u> <in-eet"tmi [wb,lmn 1" l grpa=ie n e eeet, #4]> {ie}  {tm} <l> /i<dv /i>               web               el...
WITH CONTROLLERS                    JSmApcnrle(Tmltsotolr,fnto(soe { yp.otolrepaeCnrle ucin$cp)    $cp.tm =[wb,lmn 1;     ...
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 ...
2-WAY DATA BINDING              Controller$cp.nu ="; soeipt  "$cp.laIpt=fnto( { soecernu   ucin)    $cp.nu =";     soeipt ...
HOW IT WORKS?  ONE WAY DATA BINGING
HOW IT WORKS? TWO IS MORE THAN ONE, BRO
HOW IT WORKS?     SCOPES
DEPENDENCY INJECTION  Dependecny injector is better than Chuck N.mApsrieyevc fnto( {*.*}; yp.evc(mSrie, ucin) /../)mApcnrl...
HOW IT WORKS?
ROUTING           $routeProvidermApcni(ruervdr,fnto(r){ yp.ofg[$otPoie ucin$p $p  r   .hnfo,{    we(/o     tmltUl p/o.tl, ...
DIRECTIVES          Its all about directives.mApdrcieldr,fnto( { yp.ietv(sie ucin)  rtr {   eun    ln:fnto(cp,eeet ats {  ...
and so much more on angularjs.org        Thanks for coming   @new_POPE | newpope.org
Upcoming SlideShare
Loading in...5
×

One page app with AngularJS

4,507

Published on

Why is AngularJS so cool.

Published in: Technology

Transcript of "One page app with AngularJS"

  1. 1. ONE PAGE APP WITHadam.stipak@gmail.com | @new_POPE
  2. 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. 3. WHY ?BootstrappingModule basedTemplates2-way data binding (Its fucking good)Dependency InjectionRoutingDirectives
  4. 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 Im using this way (RequireJS)vrap=aglrmdl(ap,[*dp *]; a p nua.ouep / es /)aglrbosrpdcmn,[ap]; nua.otta(ouet p)
  5. 5. MODULE BASED HTML<tln-p=mAp> hm gap"yp" JSvrmAp=aglrmdl(mAp,[) / N dp. a yp nua.oueyp ]; / o es/ Cleto o U drcie. / olcin f I ietvsaglrmdl(uDrcie [*.*]; nua.oueiietvs, /../)vrmAp=aglrmdl(mAp,[uDrcie) a yp nua.oueyp iietvs];
  6. 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. 7. WITH CONTROLLERS JSmApcnrle(Tmltsotolr,fnto(soe { yp.otolrepaeCnrle 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. 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. 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. 10. HOW IT WORKS? ONE WAY DATA BINGING
  11. 11. HOW IT WORKS? TWO IS MORE THAN ONE, BRO
  12. 12. HOW IT WORKS? SCOPES
  13. 13. DEPENDENCY INJECTION Dependecny injector is better than Chuck N.mApsrieyevc fnto( {*.*}; yp.evc(mSrie, ucin) /../)mApcnrle(SmIesotolr,fnto(yevc){ yp.otolroetmCnrle ucinmSrie / mSriewsatmtclyijce / yevc a uoaial netd mSriegtoept.ucs(ucindt){ yevc.e(sm/ah)scesfnto(aa $cp.tm =dt.tm; soeies aaies }; )}; )
  14. 14. HOW IT WORKS?
  15. 15. ROUTING $routeProvidermApcni(ruervdr,fnto(r){ yp.ofg[$otPoie ucin$p $p r .hnfo,{ we(/o tmltUl p/o.tl, epaer: tlfohm cnrle:Footolr otolr oCnrle }) .tews(rdrcT:br}; ohrie{eieto /a)}) ];
  16. 16. DIRECTIVES Its all about directives.mApdrcieldr,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. 17. and so much more on angularjs.org Thanks for coming @new_POPE | newpope.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×