Ausblick auf Component Router für AngularJS 1.x und 2

1. 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. 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. 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
SPA
Platzhalter

4. 4
Routing
Page  8
Logo + Menü
Menü2
Fußzeile
SPA
Passagier.html
/FlugDemo#flugbuchen/passagier
Weitere Möglichkeiten
Hierarchische Views
Multi-Views
Page  9

5. 5
HIERARCHISCHE VIEWS
Page  10
Hierarchische Views
Page  11
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter 1

6. 6
Hierarchische Views
Page  12
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen
flugbuchen.html
Hierarchische Views
Page  13
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen
Optionen
flugbuchen.html
Platzhalter

7. 7
Hierarchische Views
Page  14
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen/passagier
Optionen
flugbuchen.html
Passagier.html
MULTIPLE VIEWS
Page  15

8. 8
Multiple Views
Page  16
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter 1
Platzhalter 2
Multiple Views
Page  17
Logo + Menü
Menü2
Fußzeile
SPA
Passagier.html
Passagier-Links.html
/FlugDemo#flugbuchen/passagier

9. 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. 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. 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. 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. 13
DEMO
Page  26
LIFECYCLE HOOKS
Page  27

14. 14
Hooks auf Controller-Ebene
canActivate
activate
canDeactivate
deactivate
Page  28
DEMO
Page  29

15. 15
Zusammenfassung
Angular 1.x und 2 side-by-side
Schleichende Migration
Konventionen
Hierarchische Views und Multi-Views
Life-Cycle Hooks
Page  30