The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016

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