The document discusses the component router in Angular 2, which is a new routing solution for Angular 2 and AngularJS 1.x. It provides an overview of key concepts like hierarchical routing, guards, and auxiliary routes. It demonstrates these features and announces that lazy loading is coming soon, though not yet fully documented. The component router activates components and supports replacing lifecycle hooks.

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
Menu2
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
Menu2
Footer
SPA
Placeholder
Hierarchical Routing
Page  15
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
FlightBooking-Component

7. 7
Hierarchical Routing
Page  16
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
FlightBooking-Component
Hierarchical Routing
Page  17
Logo + Menu
Menu2
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
Menu2
Footer
SPA
Placeholder
Named Placeholder

13. 13
Aux-Routes
Page  37
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Named Placeholder
/FlightApp/flights
Aux-Routes
Page  38
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(aux:info)

14. 14
Aux-Routes
Page  39
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
Aux-Routes
Page  40
Logo + Menu
Menu2
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
Early bits
Early implementation!
Not in current RC
Not documented so far
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