02_routing.pdf

Transcript

1. 1 The "newest new" Router for Angular 2 Manfred Steyer ManfredSteyer About me …  Manfred Steyer  SOFTWAREarchitekt.at  Trainer & Consultant  Focus: Angular Page  2 ManfredSteyer
2. 2 ngEurope Page  3 Contents  (Quick) Overview of Concepts and Scenarios  DEMO with Angular 2  Guards  DEMO  Aux-Routes  DEMO  Outlook to Lazy Loading Page  5
3. 3 OVERVIEW Page  6 What is the Component Router? Page  7 New Router- Solution Angular 2 and 1.x Activating Components Lazy Loading Hierarchical Routing Guards Replacement for Lifecycle-Hooks Almost here …
4. 4 Short History Page  8 • 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: December 2015 • Newest Router Angular 2 RC 1: May 2016 • Newest New Router (Version 3) • Back-porting to Angular 1.x plannend Angular 2 RC 2: June 2016 Routing Page  9 Logo + Menu Menu 2 Footer SPA Placeholder
5. 5 Routing with History API Page  11 Logo + Menü Menü 2 Fußzeile SPA Flight -Component /FlightApp/flights Routing with Parameter Page  12 Logo + Menü Menü 2 Fußzeile SPA Flight-Edit- Component for Flight #17 /FlightApp/flights/17
6. 6 Hierarchical Routing Page  14 Logo + Menu Menu 2 Footer SPA Placeholder Hierarchical Routing Page  15 Logo + Menu Menu 2 Footer SPA /FlightApp/flight-booking FlightBooking-Component
7. 7 Hierarchical Routing Page  16 Logo + Menu Menu 2 Footer SPA /FlightApp/flight-booking Options Placeholder FlightBooking-Component Hierarchical Routing Page  17 Logo + Menu Menu 2 Fußzeile SPA /FlightApp/flight-booking/flights Optionen Flight- Component FlightBooking-Component
8. 8 DEMO Page  18 App Home Flight Booking Passenger Search Flight Search Flight Edit id GUARDS Page  19
9. 9 What are Guards? Services Can get other services via DI Router triggers Guards before activating/ deactivating Components Can prevent activation/ deactivation Page  20 Guards CanActivate canActivate CanDeactivate<T> canDeactivate Result: boolean | Observable<boolean>
10. 10 Configuring Guards Page  22 const APP_ROUTES: RouterConfig = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlightEditGuard] }, […] ] ] Token Provider for Guards Page  23 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), { provide: FlightEditGuard, useClass: FlightEditGuard }, { provide: AuthGuard, useClass: AuthGuard } ];
11. 11 Provider for Guards Page  24 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), FlightEditGuard, AuthGuard ]; DEMO Page  32
12. 12 AUX-ROUTES Page  35 Aux-Routes Page  36 Logo + Menu Menu 2 Footer SPA Placeholder Named Placeholder
13. 13 Aux-Routes Page  37 Logo + Menu Menu 2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights Aux-Routes Page  38 Logo + Menu Menu 2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
14. 14 Aux-Routes Page  39 Logo + Menu Menu 2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal) Aux-Routes Page  40 Logo + Menu Menu 2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/edit/17
15. 15 DEMO Page  41 LAZY LOADING Page  42
16. 16 1 4 3 2 Lazy Loading [Green, Kremer: Keynote, ngconf 2016, https://goo.gl/B7pVBb] Current State Hooks available but not documented AngularClass WebPack Starterkit  https://angularclass.github.io/angular2-webpack-starter/ Page  44
17. 17 Announced Page  45 But … Not documented Not in current RC General Rule for Angular 2: "A feature isn't ready until Victor Savkin blogged about it" Page  46
18. 18 Outlook (Github Repo, 13. 7. 2016) Page  47 Summary  Component Router: New Routing-Solution for Angular 2 and AngularJS 1.x  Lazy Loading (Coming)  Hierarchical Routing  Guards  Aux Routes Page  48
19. 19 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Contact