The document discusses the new Component Router for Angular 2 and 1.x. The Component Router allows for activating components based on routes, lazy loading of components, hierarchical routing of components with child routes, guards to prevent component activation, and auxiliary routes to add additional components to routes. It provides examples of routing configuration and usage of guards and auxiliary routes. The Component Router is the new routing solution that replaces previous lifecycle hooks and provides additional capabilities over prior routing implementations.

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
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
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
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
+ Child-Router

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
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: [FlugEditGuard]
},
[…]
]
]
Token

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
Ü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
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
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
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
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