the newst new router for angular 2 ("version 3")
TRANSCRIPT
1
The new Component Router for Angular 2
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
SOFTWAREarchitekt.at
Trainer & Consultant
Focus: Angular
Page 2
2
Contents
(Quick) Overview of Concepts and Scenarios
DEMO with Angular 2
Guards
DEMO
Aux-Routes
DEMO
Page 4
OVERVIEW
Page 5
3
What is the Component Router?
Page 6
New Router-Solution
Angular 2 and 1.x
ActivatingComponents
LazyLoading
HierarchicalRouting
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
Routing
Page 8
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
Routing with History API
Page 10
Logo + Menü
Men
ü 2
Fußzeile
SPAFlight
-Component
/FlightApp/flights
5
Routing with Parameter
Page 11
Logo + Menü
Men
ü 2
Fußzeile
SPAFlight-Edit-
Component
for Flight #17
/FlightApp/flights/17
Hierarchical Routing
Page 13
Logo + Menu
Men
u 2
Footer
SPA
Placeholder
6
Hierarchical Routing
Page 14
Logo + Menu
Men
u 2
Footer
SPA
/FlightApp/flight-bookingF
ligh
tBo
okin
g-C
om
po
ne
nt
Hierarchical Routing
Page 15
Logo + Menu
Men
u 2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
Flig
htB
oo
kin
g-C
om
po
ne
nt
7
Hierarchical Routing
Page 16
Logo + Menu
Men
u 2
Fußzeile
SPA
/FlightApp/flight-booking/flights
Optionen
Flight-
Component
Flig
htB
oo
kin
g-C
om
po
ne
nt
DEMO
Page 17
App
Home
Flight Booking
Passenger Search
Flight Search
Flight Edit
id
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
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
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
DEMO
Page 31
AUX-ROUTES
Page 34
12
Aux-Routes
Page 35
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
Named Placeholder
Aux-Routes
Page 36
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Named Placeholder
/FlightApp/flights
13
Aux-Routes
Page 37
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Info-Component
/FlightApp/flights(aux:info)
Aux-Routes
Page 38
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
14
Aux-Routes
Page 39
Logo + Menu
Men
u 2
Footer
SPAFlight-Edit-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)/edit/17
DEMO
Page 40
15
LAZY LOADING
Page 41
1
4
3
2
Lazy Loading
16
Summary
Component Router: New Routing-Solution for Angular
2 and AngularJS 1.x
Lazy Loading (Coming)
Hierarchical Routing
Guards
Aux Routes
Page 43
SOFTWAREarchitekt.at
ManfredSteyer
Contact