AngularJSHTML ENHANCED FOR WEB APPS   -   Patrick Aljord / @patcito
What Is AngularJS Trying To Fix?HTML is great for declarative code for static web page<>el wrd<ppHlo ol!/>              No...
But...                 = Imperative :-(     Declarative FTW!1.    <>el wrd/>       pHlo ol<p2.    <>{reig}/>       p{Getn}<p
Data Binding1.   Define a model2.   Binds it to a template3.   When you modify the model, templates updates automotically4...
Concrete Example: JQuery Vs AngularJS<cittp=tx/aacit>srp ye"etjvsrp" $fnto ( { (ucin )  vrnm =$nm.a(;  a ae   (#ae)vl)  vr...
Concrete Example: JQuery Vs AngularJS <i n-p>  dv gap <ae>ae<lbl  lblNm:/ae> <nu tp=tx"n-oe=yuNm"  ipt ye"et gmdl"orae> <>...
SO DATA BINDING ALLOWS CODE THAT IS   1. very simple   2. very recognizable   3. looks like the original HTML hello world ...
DATA BINDING COMING TO A BROWSER NEAR                  YOU                      Implementation When?AngularJS             ...
BUT HTML CAN BE   VERBOSE!
↤ Beatiful widgets: Cool      Tricking the browser: Not Cool ↧↧  <lcas"a nvtb"i=mTb>   u ls=nv a-as d"ya"    <icas"cie>ahe...
<google-map>           <tabs>          <tweet>          <avatar>        <color-picker>          <invoice><unleash-your-ima...
REUSABLE COMPONENTS COMING TO A            BROWSER NEAR YOU             Implementation When?AngularJS    DOM+JS         No...
Mozilla shim for web components: x-tags.orgW3C specs:http://www.w3.org/TR/2012/WD-components-intro-20120522/#custom-elemen...
THE WHOLE PACKAGE       TO BUILD KICK ASS WEB APPS!  ✓ Data binding  ✓ Templating  ✓ Routing and deep linking  ✓ Testing  ...
angularjs scaffoldCheckout angularjs_scaffold if youre into Rails.https://github.com/patcito/angularjs_scaffold
Thanks!                   Patrick Aljord @patcito                 http://blog.ricodigo.com                 http://twitter....
Introduction to AngularJS
Introduction to AngularJS
Upcoming SlideShare
Loading in …5
×

Introduction to AngularJS

3,342 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,342
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
83
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Introduction to AngularJS

  1. 1. AngularJSHTML ENHANCED FOR WEB APPS - Patrick Aljord / @patcito
  2. 2. What Is AngularJS Trying To Fix?HTML is great for declarative code for static web page<>el wrd<ppHlo ol!/> Not so for dynamic pages:< i=getn1>/> p d"reig"<p <cit srp> vriI =dcmn.tahvn; a sE ouetatcEet vraditnr=iI a dLsee sE ?fnto(,t f){ ucine , n eatcEetn +t f)} .tahvn(o , n; :fnto(,t f){ ucine , n eadvnLsee(,f,fle;; .dEetitnrt n as)} aditnrdcmn,od,fnto({ dLsee(ouet la ucin) vrgetn =dcmn.eEeetydreig; a reig ouetgtlmnBI(getn1) i (sE { f iI) getn.neTx =el Wrd reiginret Hlo ol!; }es { le getn.etotn =el Wrd reigtxCnet Hlo ol!; } }; ) <srp> /cit
  3. 3. But... = Imperative :-( Declarative FTW!1. <>el wrd/> pHlo ol<p2. <>{reig}/> p{Getn}<p
  4. 4. Data Binding1. Define a model2. Binds it to a template3. When you modify the model, templates updates automotically4. When the user intereacts with the UI, templates knows how to sync the data with the model.
  5. 5. Concrete Example: JQuery Vs AngularJS<cittp=tx/aacit>srp ye"etjvsrp" $fnto ( { (ucin ) vrnm =$nm.a(; a ae (#ae)vl) vrgetn =$getn; a reig (#reig) nm.eu(ucin( { aekypfnto ) getn.etel nm +; reigtx(Hlo + ae !) }) })<srp> /cit<i> dv<ae>ae<lbl lblNm:/ae><nu tp=tx"i=nm" ipt ye"et d"ae>< i=getn"<p p d"reig>/><dv /i> Name: Enter a name here HELLO
  6. 6. Concrete Example: JQuery Vs AngularJS <i n-p> dv gap <ae>ae<lbl lblNm:/ae> <nu tp=tx"n-oe=yuNm" ipt ye"et gmdl"orae> <>el {yuNm}!/> pHlo {orae}<p <dv /i> Name: Enter a name here HELLO !
  7. 7. SO DATA BINDING ALLOWS CODE THAT IS 1. very simple 2. very recognizable 3. looks like the original HTML hello world Thanks To... 1. Dirty checking 2. Only checks the current view 3. Only check when change may happen 4. Leverage the JIT 5. But... the DOM is slow
  8. 8. DATA BINDING COMING TO A BROWSER NEAR YOU Implementation When?AngularJS Javascript NowModel Driven Views Native FutureObject.observe Native Future Theres already an AngularJS branch using Object.observe !
  9. 9. BUT HTML CAN BE VERBOSE!
  10. 10. ↤ Beatiful widgets: Cool Tricking the browser: Not Cool ↧↧ <lcas"a nvtb"i=mTb> u ls=nv a-as d"ya" <icas"cie>ahe=#eto1>eto 1/>/i l ls=atv"< rf"scin"Scin <a<l> <i< he=#rfl"Scin2/>/i l>a rf"poie>eto <a<l> <u> /l <i cas"a-otn" dv ls=tbcnet> <i cas"a-aeatv"i=scin"H,ImScin1/i dv ls=tbpn cie d"eto1>i eto <d v> <i cas"a-ae i=scin"H,ImScin2/i> dv ls=tbpn" d"eto2>i eto <dv <dv /i> <cit srp> $fnto ( { (ucin ) $mTbals.a(so; (#ya :at)tbhw) }) <srp> /citDeclarative reusable components: Cool ↧↧ <as tb> <aette"eto 1> pn il=Scin " H,ImScin1 i eto <pn> /ae <aette"eto 2> pn il=Scin " H,ImScin2 i eto <pn> /ae <tb> /as
  11. 11. <google-map> <tabs> <tweet> <avatar> <color-picker> <invoice><unleash-your-imagination>
  12. 12. REUSABLE COMPONENTS COMING TO A BROWSER NEAR YOU Implementation When?AngularJS DOM+JS Now (directives)Web Native Near FutureComponents
  13. 13. Mozilla shim for web components: x-tags.orgW3C specs:http://www.w3.org/TR/2012/WD-components-intro-20120522/#custom-element-section
  14. 14. THE WHOLE PACKAGE TO BUILD KICK ASS WEB APPS! ✓ Data binding ✓ Templating ✓ Routing and deep linking ✓ Testing ✓ Form validation ✓ Dependency injection ✓ MVW (Model/View/Whatever!)
  15. 15. angularjs scaffoldCheckout angularjs_scaffold if youre into Rails.https://github.com/patcito/angularjs_scaffold
  16. 16. Thanks! Patrick Aljord @patcito http://blog.ricodigo.com http://twitter.com/patcito +Patrick AljordCredits for the slides: Vojta Jína, Miško Hevery, Igor Minar.

×