the newst new router for angular 2 - talk at @angular_berlin, july 2016
TRANSCRIPT
![Page 1: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/1.jpg)
1
The "newest new" Router for Angular 2
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
SOFTWAREarchitekt.at
Trainer & Consultant
Focus: Angular
Page 2
ManfredSteyer
![Page 2: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/2.jpg)
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
![Page 3: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/3.jpg)
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 …
![Page 4: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/4.jpg)
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
![Page 5: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/5.jpg)
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
![Page 6: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/6.jpg)
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
![Page 7: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/7.jpg)
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
![Page 8: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/8.jpg)
8
DEMO
Page 18
App
Home
Flight Booking
Passenger Search
Flight Search
Flight Edit
id
GUARDS
Page 19
![Page 9: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/9.jpg)
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>
![Page 10: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/10.jpg)
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 }
];
![Page 11: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/11.jpg)
11
Provider for Guards
Page 24
export const APP_ROUTER_PROVIDER = [provideRouter(APP_ROUTES),FlightEditGuard, AuthGuard
];
DEMO
Page 32
![Page 12: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/12.jpg)
12
AUX-ROUTES
Page 35
Aux-Routes
Page 36
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
Named Placeholder
![Page 13: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/13.jpg)
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)
![Page 14: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/14.jpg)
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
![Page 15: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/15.jpg)
15
DEMO
Page 41
LAZY LOADING
Page 42
![Page 16: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/16.jpg)
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
![Page 17: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/17.jpg)
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
![Page 18: The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016](https://reader033.vdocuments.site/reader033/viewer/2022051707/58ee42081a28ab75198b4601/html5/thumbnails/18.jpg)
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