Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Modern angular 04_component_router

872 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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

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

×