Der neueste neue Router (Version 3) für Angular 2
15
1 The new Component Router for Angular 2 (and 1.x) Manfred Steyer ManfredSteyer About me … Manfred Steyer SOFTWAREarchitekt.at Trainer & Consultant Angular Server-Side .NET Page 2
-
Upload
manfred-steyer -
Category
Internet
-
view
195 -
download
3
Transcript of Der neueste neue Router (Version 3) für Angular 2
1
The new Component Router for Angular 2 (and 1.x)
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
SOFTWAREarchitekt.at
Trainer & Consultant
Angular
Server-Side .NET
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
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 planend
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
+ Child-Router
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
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: [FlugEditGuard]
},[…]
]]
Token
10
Provider for Guards
Page 22
export const APP_ROUTER_PROVIDER = [provideRouter(APP_ROUTES),FlugEditGuard,AuthGuard
];
DEMO
Page 30
App
Home
Flight Booking
Passenger Search
Flight Search
Flight Edit
id
11
Übung
Betrachten Sie das gezeigte Beispiel und führen Sie es aus
Erweitern Sie ihr Beispiel analog zum gezeigten Beispiel um Routing
Page 31
App
Home
FlightSearch
PassengerSearch
PassengerEdit
id
AUX-ROUTES
Page 33
12
Aux-Routes
Page 34
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
Named Placeholder
Aux-Routes
Page 35
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Named Placeholder
/FlightApp/flights
13
Aux-Routes
Page 36
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Info-Component
/FlightApp/flights(aux:info)
Aux-Routes
Page 37
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
14
Aux-Routes
Page 38
Logo + Menu
Men
u 2
Footer
SPAFlight-Edit-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)/edit/17
DEMO
Page 39
15
Summary
Component Router: New Routing-Solution for Angular
2 and AngularJS 1.x
Lazy Loading
Hierarchical Routing
Guards
Aux Routes
Page 40
SOFTWAREarchitekt.at
ManfredSteyer
Contact
