HTML enhanced for web apps! Fodor Krisztián AngularJS HTML enhanced for web apps! Fodor Krisztián
Mese Főleg Backend ASP.NET MVC Tesztek hiánya jQuery Remek js könyvtár, de könnyen a hackelés melegágya lehet. Idáig 3 sikeres projekt Angular-ral
Mi is az AngularJS? Nem egy JavaScript könyvtár . Nincsenek függvényei, amit közvetlenül meghívhatunk Nem alkalmas közvetlen DOM manipulációra (pl.: jQuery) A fókusz sokkal inkább az alkalmazások HTML oldalán van MVC megközelítést támogat Google gyerek
Miért az AngularJS? Radikálisan javít a klasszikus HTML-en (saját tagek, attribútumok, kifejezések, stb.) Kiválóan illeszkedik a TDD szemléletbe MVC Frontend keretrendszer, ami tényleges frontend alapokon nyugszik Deklaratív a felületen (HTML) Imperatív az alkalmazás logikában (JavaScript) Menő szolgáltatások
MVC: Model View Controller (Object literal) View (HTML) Controller (JavaScript)
MVC: View View Deklaratív UI Angular direktívák Kifejezések {{ }}
MVC: Controller Nem hivatkozik a View-ra közvetlenül Dependency injection
MVC: Model Nem hivatkozik a View-ra közvetlenül Dependency injection A függőségek a keretrendszer „ befecskendez” be a kontrollerekbe A $scope-ból érhető el (lényegében alkalmazás állapot)
View alap koncepció Direktívák Kifejezések Filterek Új tag-ek, attribútumok Kifejezések Bind szintakszis – {{ }}, hivatkozni tudunk modell elemekre. A keretrendszer gondoskodik az UI és a modell szinkronizálásáról. Filterek Nyers adatok formázása megjelenítésre. attribútumok
Controller alap koncepció AngularJS névtér $ Dependency injection Minden függőséget a keretrendszer biztosít $scope, $location, $window Modell manipuláció Új eseménykezelők
Data Binding
Data Binding
MVC a gyakorlatban
Néhány direktíva ng-app ng-init ng-controller ng-model ng-show <html ng-app> ng-init ng-controller ng-model <input ng-model="lastName"> ng-show ng-repeat ng-switch ng-if
Demó Basic Todo
De mi is történik a háttérben? Egy AngularJS alkalmazás életciklusa Alkalmazás indulása Futásidejű feldolgozás
Alkalmazás indulás Oldal betöltése DOM összeállítás On DOMContentLoaded Event Angular alkalmazás gyökerének keresés (ng-app) DOM összeállítás Fordítás: eredeti DOM feldolgozása, direktívák/kifejezések keresése Listener, callback, watcher stb. Linkelés: A direktívék és a $scope (model) összekapcsolása, végleges nézet elgészítése
Alkalmazás indulás
Futásidőben A DOM összeállítását követően a „hagyományos” böngésző eseményekre feliratkozik az Angular Van egy belső Event loop Minden hívás be van csomagolva egy $apply hívásba $apply meghívja a $digest, ami ellenőrzi a változásokat, és kiváltja a frissítő eseményeket
Futásidőben
Egyéb eszközök AngularJS - angularjs.org Bower - bower.io Grunt - gruntjs.com
Kérdések?
Kérdések! Mi az AngularJS? Milyen programtervezési mintát (design pattern) követ az AngularJS? Nevezz meg kettő direktívát!
Köszönöm a figyelmet!