One page app with AngularJS

  • Published on
    28-Nov-2014

  • View
    5.316

  • Download
    1

Embed Size (px)

DESCRIPTION

Why is AngularJS so cool.

Transcript

  • 1. ONE PAGE APP WITHadam.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 ?BootstrappingModule basedTemplates2-way data binding (Its fucking good)Dependency InjectionRoutingDirectives
  • 4. BOOTSTRAPPING Step 1: srp r=lbj/nua.i.s>/cit Step 2: 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. MODULE BASED HTML 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. TEMPLATES {ie} {tm} /i web element #14
  • 7. WITH CONTROLLERS JSmApcnrle(Tmltsotolr,fnto(soe { yp.otolrepaeCnrle ucin$cp) $cp.tm =[wb,lmn 1; soeies e eeet, #4]}; ) Template sa grpa=ie n tm" {ie}{idx}/ml> {tm}sal{$ne} /pn Result web 0 element 1 #14 2
  • 8. ASYNC TEMPLATES dv gve> !- ny n n h ae - But, you can use this 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 ipt gmdl"nu" 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.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. HOW IT WORKS?
  • 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. 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. and so much more on angularjs.org Thanks for coming @new_POPE | newpope.org

Recommended

View more >