Introduction to AngularJS
3 likes2,684 views
AngularJS provides tools to build dynamic web applications using declarative templates and two-way data binding between the application logic and UI. It allows code to be simple, recognizable and look like the original HTML while synchronizing data changes automatically. Key features include reusable components, routing, testing and other tools to build powerful web apps. While the implementation is available now using JavaScript, future browsers may support these features natively.
Introduction to AngularJS
- 1. AngularJS HTML ENHANCED FOR WEB APPS - Patrick Aljord / @patcito
- 2. What Is AngularJS Trying To Fix? HTML is great for declarative code for static web page <>el wrd<p pHlo 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 eatcEet'n +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.eEeetyd'reig'; 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. But... = Imperative :-( Declarative FTW! 1. <>el wrd/> pHlo ol<p 2. <>{reig}/> p{Getn}<p
- 4. Data Binding 1. Define a model 2. Binds it to a template 3. When you modify the model, templates updates automotically 4. When the user intereacts with the UI, templates knows how to sync the data with the model.
- 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.et'el ' 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. 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. 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. DATA BINDING COMING TO A BROWSER NEAR YOU Implementation When? AngularJS Javascript Now Model Driven Views Native Future Object.observe Native Future There's already an AngularJS branch using Object.observe !
- 9. BUT HTML CAN BE VERBOSE!
- 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)tb'hw) }) <srp> /cit Declarative 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. <google-map> <tabs> <tweet> <avatar> <color-picker> <invoice> <unleash-your-imagination>
- 12. REUSABLE COMPONENTS COMING TO A BROWSER NEAR YOU Implementation When? AngularJS DOM+JS Now (directives) Web Native Near Future Components
- 13. Mozilla shim for web components: x-tags.org W3C specs: http://www.w3.org/TR/2012/WD-components-intro- 20120522/#custom-element-section
- 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!)
- 16. angularjs scaffold Checkout angularjs_scaffold if you're into Rails. https://github.com/patcito/angularjs_scaffold
- 17. Thanks! Patrick Aljord @patcito http://blog.ricodigo.com http://twitter.com/patcito +Patrick Aljord Credits for the slides: Vojta Jína, Miško Hevery, Igor Minar.