Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Der neueste neue Router (Version 3) für Angular 2

268 views

Published on

Überblick zum neusten neuen Router (Version 3) für Angular 2, Angular Meetup Graz, Juni 2016

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Der neueste neue Router (Version 3) für Angular 2

  1. 1. 1 The new Component Router for Angular 2 (and 1.x) Manfred Steyer ManfredSteyer About me …  Manfred Steyer  SOFTWAREarchitekt.at  Trainer & Consultant  Angular  Server-Side .NET Page  2
  2. 2. 2 Contents (Quick) Overview of Concepts and Scenarios DEMO with Angular 2 Guards DEMO Aux-Routes DEMO Page  4 OVERVIEW Page  5
  3. 3. 3 What is the Component Router? Page  6 New Router- Solution Angular 2 and 1.x Activating Components Lazy Loading Hierarchical Routing Guards Replacement for Lifecycle-Hooks Short History Page  7 • Core: Stable • Moving Parts beyond the core • New Router/ Component Router • Breaking Changes: Almost find/replace • Also back-ported to Angular 1.x Angular 2 BETA: Dezember 2015 • Newest Router Angular 2 RC 1: May 2016 • Newest New Router (Version 3) • Back-porting to Angular 1.x planend Angular 2 RC 2: June 2016
  4. 4. 4 Routing Page  8 Logo + Menu Menu2 Footer SPA Placeholder Routing with History API Page  10 Logo + Menü Menü2 Fußzeile SPA Flight -Component /FlightApp/flights
  5. 5. 5 Routing with Parameter Page  11 Logo + Menü Menü2 Fußzeile SPA Flight-Edit- Component for Flight #17 /FlightApp/flights/17 Hierarchical Routing Page  13 Logo + Menu Menu2 Footer SPA Placeholder
  6. 6. 6 Hierarchical Routing Page  14 Logo + Menu Menu2 Footer SPA /FlightApp/flight-booking FlightBooking-Component Hierarchical Routing Page  15 Logo + Menu Menu2 Footer SPA /FlightApp/flight-booking Options Placeholder FlightBooking-Component + Child-Router
  7. 7. 7 Hierarchical Routing Page  16 Logo + Menu Menu2 Fußzeile SPA /FlightApp/flight-booking/flights Optionen Flight- Component FlightBooking-Component DEMO Page  17
  8. 8. 8 GUARDS Page  18 What are Guards? Services Can get other services via DI Router triggers Guards before activating/ deactivating Components Can prevent activation/ deactivation Page  19
  9. 9. 9 Guards CanActivate canActivate CanDeactivate<T> canDeactivate Result: boolean | Observable<boolean> Configuring Guards Page  21 const APP_ROUTES: RouterConfig = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ] Token
  10. 10. 10 Provider for Guards Page  22 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), FlugEditGuard, AuthGuard ]; DEMO Page  30 App Home Flight Booking Passenger Search Flight Search Flight Edit id
  11. 11. 11 Übung  Betrachten Sie das gezeigte Beispiel und führen Sie es aus  Erweitern Sie ihr Beispiel analog zum gezeigten Beispiel um Routing Page  31 App Home Flight Search Passenger Search Passenger Edit id AUX-ROUTES Page  33
  12. 12. 12 Aux-Routes Page  34 Logo + Menu Menu2 Footer SPA Placeholder Named Placeholder Aux-Routes Page  35 Logo + Menu Menu2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights
  13. 13. 13 Aux-Routes Page  36 Logo + Menu Menu2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info) Aux-Routes Page  37 Logo + Menu Menu2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
  14. 14. 14 Aux-Routes Page  38 Logo + Menu Menu2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/edit/17 DEMO Page  39
  15. 15. 15 Summary  Component Router: New Routing-Solution for Angular 2 and AngularJS 1.x  Lazy Loading  Hierarchical Routing  Guards  Aux Routes Page  40 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Contact

×