Modern angular 04_component_router

791 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
791
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
7
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

×