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.
1
The new Component Router
for Angular 2
Manfred Steyer
ManfredSteyer
About me …
 Manfred Steyer
 SOFTWAREarchitekt.at
...
2
Contents
(Quick) Overview of Concepts and Scenarios
DEMO with Angular 2
Guards
DEMO
Aux-Routes
DEMO
Page  4
OVERV...
3
What is the Component Router?
Page  6
New Router-
Solution
Angular 2
and 1.x
Activating
Components
Lazy
Loading
Hierarc...
4
Routing
Page  8
Logo + Menu
Menu2
Footer
SPA
Placeholder
Routing with History API
Page  10
Logo + Menü
Menü2
Fußzeile
...
5
Routing with Parameter
Page  11
Logo + Menü
Menü2
Fußzeile
SPA
Flight-Edit-
Component
for Flight #17
/FlightApp/flights...
6
Hierarchical Routing
Page  14
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
FlightBooking-Component
Hierarchic...
7
Hierarchical Routing
Page  16
Logo + Menu
Menu2
Fußzeile
SPA
/FlightApp/flight-booking/flights
Optionen
Flight-
Compone...
8
GUARDS
Page  18
What are Guards?
Services
Can get other services via DI
Router triggers Guards before activating/
de...
9
Guards
CanActivate canActivate
CanDeactivate<T> canDeactivate
Result: boolean | Observable<boolean>
Configuring Guards
P...
10
Provider for Guards
Page  22
export const APP_ROUTER_PROVIDER = [
provideRouter(APP_ROUTES),
{ provide: FlightEditGuar...
11
DEMO
Page  31
AUX-ROUTES
Page  34
12
Aux-Routes
Page  35
Logo + Menu
Menu2
Footer
SPA
Placeholder
Named Placeholder
Aux-Routes
Page  36
Logo + Menu
Menu2
...
13
Aux-Routes
Page  37
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(aux:info)
Aux-Rou...
14
Aux-Routes
Page  39
Logo + Menu
Menu2
Footer
SPA Flight-Edit-
Component
Modal-Component
/FlightApp/flights(aux:info/mo...
15
LAZY LOADING
Page  41
1
4
3
2
Lazy Loading
16
Summary
 Component Router: New Routing-Solution for Angular
2 and AngularJS 1.x
 Lazy Loading (Coming)
 Hierarchical...
Upcoming SlideShare
Loading in …5
×

The newst new Router for Angular 2 ("Version 3")

675 views

Published on

Presentation from AngularCamp in Barcelona, July 2016

Published in: Internet
  • Be the first to comment

The newst new Router for Angular 2 ("Version 3")

  1. 1. 1 The new Component Router for Angular 2 Manfred Steyer ManfredSteyer About me …  Manfred Steyer  SOFTWAREarchitekt.at  Trainer & Consultant  Focus: Angular 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 Almost here … 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 plannend 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
  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 App Home Flight Booking Passenger Search Flight Search Flight Edit id
  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: [FlightEditGuard] }, […] ] ] Token
  10. 10. 10 Provider for Guards Page  22 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), { provide: FlightEditGuard, useClass: FlightEditGuard }, { provide: AuthGuard, useClass: AuthGuard } ]; Provider for Guards Page  23 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), FlightEditGuard, AuthGuard ];
  11. 11. 11 DEMO Page  31 AUX-ROUTES Page  34
  12. 12. 12 Aux-Routes Page  35 Logo + Menu Menu2 Footer SPA Placeholder Named Placeholder Aux-Routes Page  36 Logo + Menu Menu2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights
  13. 13. 13 Aux-Routes Page  37 Logo + Menu Menu2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info) Aux-Routes Page  38 Logo + Menu Menu2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
  14. 14. 14 Aux-Routes Page  39 Logo + Menu Menu2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/edit/17 DEMO Page  40
  15. 15. 15 LAZY LOADING Page  41 1 4 3 2 Lazy Loading
  16. 16. 16 Summary  Component Router: New Routing-Solution for Angular 2 and AngularJS 1.x  Lazy Loading (Coming)  Hierarchical Routing  Guards  Aux Routes Page  43 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Contact

×