Embed Size (px)
Citation preview
1
Component Router für Angular 1.x und 2.0
Manfred Steyer
ManfredSteyer
Inhalt
Überblick zu Routing
Stand der Dinge
Component Router
DEMO
Lifecycle-Hooks
DEMO
Page 3
2
ÜBERBLICK ZU ROUTING
Page 4
Motivation
SPAs bestehen aus einer Seite
Innerhalb dieser werden Bereiche ein- und
ausgeblendet --> "Logische Seiten"
Herausforderungen:
Bookmarks
Back-Button
Eigene Datei pro logischer Seite --> Übersicht
Page 5
3
Routing
Logische Seiten erhalten eine URL, z. B:
/FlugDemo#flugbuchen/passagier
/FlugDemo#flugbuchen/flug
Logische Seiten erhalten URL-Parameter, z. B.:
/FlugDemo#flugbuchen/passagier/5
Page 6
Routing
Page 7
Logo + Menü
Men
ü 2
Fußzeile
SPAPlatzhalter
4
Routing
Page 8
Logo + Menü
Men
ü 2
Fußzeile
SPAPassagier.html
/FlugDemo#flugbuchen/passagier
Weitere Möglichkeiten
Hierarchische Views
Multi-Views
Page 9
5
HIERARCHISCHE VIEWS
Page 10
Hierarchische Views
Page 11
Logo + Menü
Men
ü 2
Fußzeile
SPA
Platzhalter 1
6
Hierarchische Views
Page 12
Logo + Menü
Men
ü 2
Fußzeile
SPA
/FlugDemo#flugbuchenflu
gb
uch
en
.htm
l
Hierarchische Views
Page 13
Logo + Menü
Men
ü 2
Fußzeile
SPA
/FlugDemo#flugbuchen
Optionen flugb
uch
en
.htm
l
Platzhalter
7
Hierarchische Views
Page 14
Logo + Menü
Men
ü 2
Fußzeile
SPA
/FlugDemo#flugbuchen/passagier
Optionen flugb
uch
en
.htm
l
Passagier.html
MULTIPLE VIEWS
Page 15
8
Multiple Views
Page 16
Logo + Menü
Men
ü 2
Fußzeile
SPAPlatzhalter 1
Platzhalter 2
Multiple Views
Page 17
Logo + Menü
Men
ü 2
Fußzeile
SPAPassagier.html
Passagier-Links.html
/FlugDemo#flugbuchen/passagier
9
STAND DER DINGE
Page 18
ngRoute
Routing-Modul in AngularJS
Nur für einfache Use-Cases gedacht
Kein hierarchisches Routing
Keine Multi-Views
Page 19
10
UI-Router
Freies Community-Projekt
Defakto Standard
Unterstützt alle bis dato betrachteten
Szenarien für AngularJS 1.x
Auch: Hierarchische Views und Multi-Views
Page 20
COMPONENT ROUTER
Page 21
11
Überblick
Unterstützt die bisher betrachteten Szenarien
Convention over Configuration
Unterstützt sowohl AngularJS 1.x als auch
Angular 2 side-by-side
„Schleichende“ Migrationsstrategie
Page 22
Komponenten
Ziel einer Route --> Komponente
Komponente in Angular 1.x:
Controller + Template
Konvention für Controller: XYController
Konvention für Template: xy/xy.html
Konvention für Controller-Instanz: xy
Konfigurieren: $componentLoaderProvider
Page 23
12
Entwicklungsstand und Installation
Noch in Entwicklung!!
Hier vorgestellte Version: 0.5.x
Soll mit Angular 1.5 kommen
Installation: npm install angular-new-router
Page 24
Künftige Features
Navigation-Model
Lazy Loading
Page 25
13
DEMO
Page 26
LIFECYCLE HOOKS
Page 27
14
Hooks auf Controller-Ebene
canActivate
activate
canDeactivate
deactivate
Page 28
DEMO
Page 29
15
Zusammenfassung
Angular 1.x und 2 side-by-side
Schleichende Migration
Konventionen
Hierarchische Views und Multi-Views
Life-Cycle Hooks
Page 30
