Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

HTML ENHANCED FOR WEB APPS! FODOR KRISZTIÁN AngularJS.

Hasonló előadás


Az előadások a következő témára: "HTML ENHANCED FOR WEB APPS! FODOR KRISZTIÁN AngularJS."— Előadás másolata:

1 HTML ENHANCED FOR WEB APPS! FODOR KRISZTIÁN AngularJS

2 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

3 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

4 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

5 MVC: Model View Controller Model ( Object literal ) View ( HTML ) Controller ( JavaScript )

6 MVC: View View  Deklaratív UI  Angular direktívák  Kifejezések {{ }}

7 MVC: Controller Controller  Nem hivatkozik a View-ra közvetlenül  Dependency injection

8 MVC: Model 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)

9 View alap koncepció  Direktívák  Ú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

10 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

11 Data Binding

12

13 MVC a gyakorlatban

14 Néhány direktíva  ng-app   ng-init  ng-controller  ng-model   ng-show  ng-repeat  ng-switch  ng-if

15 Demó  Basic  Todo

16 De mi is történik a háttérben?  Egy AngularJS alkalmazás életciklusa  Alkalmazás indulása  Futásidejű feldolgozás

17 Alkalmazás indulás  Oldal betöltése  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

18 Alkalmazás indulás

19 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

20 Futásidőben

21 Egyéb eszközök  AngularJS - angularjs.org  Bower - bower.io  Grunt - gruntjs.com

22 Kérdések?

23 Kérdések!  Mi az AngularJS?  Milyen programtervezési mintát (design pattern) követ az AngularJS?  Nevezz meg kettő direktívát!

24 Köszönöm a figyelmet!


Letölteni ppt "HTML ENHANCED FOR WEB APPS! FODOR KRISZTIÁN AngularJS."

Hasonló előadás


Google Hirdetések