Learn Angular IndiaMentor · Learn Angular IndiaMentor ... x } x @
The newst new Router for Angular 2 ("Version 3")
-
Upload
manfred-steyer -
Category
Internet
-
view
485 -
download
3
Transcript of The newst new Router for Angular 2 ("Version 3")
![Page 1: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/1.jpg)
1
The new Component Router for Angular 2
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
SOFTWAREarchitekt.at
Trainer & Consultant
Focus: Angular
Page 2
![Page 2: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/2.jpg)
2
Contents
(Quick) Overview of Concepts and Scenarios
DEMO with Angular 2
Guards
DEMO
Aux-Routes
DEMO
Page 4
OVERVIEW
Page 5
![Page 3: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/3.jpg)
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
![Page 4: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/4.jpg)
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
![Page 5: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/5.jpg)
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
![Page 6: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/6.jpg)
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
![Page 7: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/7.jpg)
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
![Page 8: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/8.jpg)
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
![Page 9: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/9.jpg)
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
![Page 10: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/10.jpg)
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
];
![Page 11: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/11.jpg)
11
DEMO
Page 31
AUX-ROUTES
Page 34
![Page 12: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/12.jpg)
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
![Page 13: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/13.jpg)
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)
![Page 14: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/14.jpg)
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
![Page 15: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/15.jpg)
15
LAZY LOADING
Page 41
1
4
3
2
Lazy Loading
![Page 16: The newst new Router for Angular 2 ("Version 3")](https://reader034.fdocuments.us/reader034/viewer/2022042906/589f0d181a28ab226b8b59cb/html5/thumbnails/16.jpg)
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