Überblick zum neusten neuen Router (Version 3) für Angular 2, Angular Meetup Graz, Juni 2016

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