1
Component Router
für Angular 1.x und 2.0
Manfred Steyer
ManfredSteyer
Inhalt
Überblick zu Routing
Stand der Dinge
Com...
2
ÜBERBLICK ZU ROUTING
Page  4
Motivation
 SPAs bestehen aus einer Seite
 Innerhalb dieser werden Bereiche ein- und
aus...
3
Routing
 Logische Seiten erhalten eine URL, z. B:
 /FlugDemo#flugbuchen/passagier
 /FlugDemo#flugbuchen/flug
 Logisc...
4
Routing
Page  8
Logo + Menü
Menü2
Fußzeile
SPA
Passagier.html
/FlugDemo#flugbuchen/passagier
Weitere Möglichkeiten
Hie...
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#flugbuchen
flugbuchen.html
Hierarchische Views
Pa...
7
Hierarchische Views
Page  14
Logo + Menü
Menü2
Fußzeile
SPA
/FlugDemo#flugbuchen/passagier
Optionen
flugbuchen.html
Pas...
8
Multiple Views
Page  16
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter 1
Platzhalter 2
Multiple Views
Page  17
Logo + Menü...
9
STAND DER DINGE
Page  18
ngRoute
Routing-Modul in AngularJS
Nur für einfache Use-Cases gedacht
Kein hierarchisches R...
10
UI-Router
Freies Community-Projekt
Defakto Standard
Unterstützt alle bis dato betrachteten
Szenarien für AngularJS 1...
11
Überblick
Unterstützt die bisher betrachteten Szenarien
Convention over Configuration
Unterstützt sowohl AngularJS 1...
12
Entwicklungsstand und Installation
Noch in Entwicklung!!
Hier vorgestellte Version: 0.5.x
Soll mit Angular 1.5 komme...
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-Vi...
Nächste SlideShare
Wird geladen in …5
×

Modern angular 04_component_router

477 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
477
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
6
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Modern angular 04_component_router

  1. 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. 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. 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. 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. 5 HIERARCHISCHE VIEWS Page  10 Hierarchische Views Page  11 Logo + Menü Menü2 Fußzeile SPA Platzhalter 1
  6. 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. 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. 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. 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. 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. 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. 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. 13 DEMO Page  26 LIFECYCLE HOOKS Page  27
  14. 14. 14 Hooks auf Controller-Ebene canActivate activate canDeactivate deactivate Page  28 DEMO Page  29
  15. 15. 15 Zusammenfassung Angular 1.x und 2 side-by-side Schleichende Migration Konventionen Hierarchische Views und Multi-Views Life-Cycle Hooks Page  30

×