Presentation from AngularCamp in Barcelona, July 2016

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
Contents
(Quick) Overview of Concepts and Scenarios
DEMO with Angular 2
Guards
DEMO
Aux-Routes
DEMO
Page  4
OVERVIEW
Page  5

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
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
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
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
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
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
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
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
DEMO
Page  31
AUX-ROUTES
Page  34

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
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
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
LAZY LOADING
Page  41
1
4
3
2
Lazy Loading

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