Embed Size (px)
Citation preview
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
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
OVERVIEW
Page 6
What is the Component Router?
Page 7
New Router-Solution
Angular 2 and 1.x
ActivatingComponents
LazyLoading
HierarchicalRouting
Guards
Replacement for Lifecycle-Hooks
Almost here …
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
Men
u 2
Footer
SPAPlaceholder
5
Routing with History API
Page 11
Logo + Menü
Men
ü 2
Fußzeile
SPAFlight
-Component
/FlightApp/flights
Routing with Parameter
Page 12
Logo + Menü
Men
ü 2
Fußzeile
SPAFlight-Edit-
Component
for Flight #17
/FlightApp/flights/17
6
Hierarchical Routing
Page 14
Logo + Menu
Men
u 2
Footer
SPA
Placeholder
Hierarchical Routing
Page 15
Logo + Menu
Men
u 2
Footer
SPA
/FlightApp/flight-booking
Flig
htB
oo
kin
g-C
om
po
ne
nt
7
Hierarchical Routing
Page 16
Logo + Menu
Men
u 2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
Flig
htB
oo
kin
g-C
om
po
ne
nt
Hierarchical Routing
Page 17
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
8
DEMO
Page 18
App
Home
Flight Booking
Passenger Search
Flight Search
Flight Edit
id
GUARDS
Page 19
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
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
Provider for Guards
Page 24
export const APP_ROUTER_PROVIDER = [provideRouter(APP_ROUTES),FlightEditGuard, AuthGuard
];
DEMO
Page 32
12
AUX-ROUTES
Page 35
Aux-Routes
Page 36
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
Named Placeholder
13
Aux-Routes
Page 37
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Named Placeholder
/FlightApp/flights
Aux-Routes
Page 38
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Info-Component
/FlightApp/flights(aux:info)
14
Aux-Routes
Page 39
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
Aux-Routes
Page 40
Logo + Menu
Men
u 2
Footer
SPAFlight-Edit-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)/edit/17
15
DEMO
Page 41
LAZY LOADING
Page 42
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
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
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
