Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
HTML enhanced for web apps! Fodor Krisztián
AngularJS HTML enhanced for web apps! Fodor Krisztián
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
(Object literal) View (HTML) Controller (JavaScript)
6
MVC: View View Deklaratív UI Angular direktívák Kifejezések {{ }}
7
MVC: Controller Nem hivatkozik a View-ra közvetlenül
Dependency injection
8
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)
9
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
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
Data Binding
13
MVC a gyakorlatban
14
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
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 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
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!
Hasonló előadás
