Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
The newst new Router for Angular 2 ("Version 3")
1. 1
The new Component Router
for Angular 2
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
SOFTWAREarchitekt.at
Trainer & Consultant
Focus: Angular
Page 2
2. 2
Contents
(Quick) Overview of Concepts and Scenarios
DEMO with Angular 2
Guards
DEMO
Aux-Routes
DEMO
Page 4
OVERVIEW
Page 5
3. 3
What is the Component Router?
Page 6
New Router-
Solution
Angular 2
and 1.x
Activating
Components
Lazy
Loading
Hierarchical
Routing
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. 4
Routing
Page 8
Logo + Menu
Menu2
Footer
SPA
Placeholder
Routing with History API
Page 10
Logo + Menü
Menü2
Fußzeile
SPA Flight
-Component
/FlightApp/flights
5. 5
Routing with Parameter
Page 11
Logo + Menü
Menü2
Fußzeile
SPA
Flight-Edit-
Component
for Flight #17
/FlightApp/flights/17
Hierarchical Routing
Page 13
Logo + Menu
Menu2
Footer
SPA
Placeholder
6. 6
Hierarchical Routing
Page 14
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
FlightBooking-Component
Hierarchical Routing
Page 15
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
FlightBooking-Component
7. 7
Hierarchical Routing
Page 16
Logo + Menu
Menu2
Fußzeile
SPA
/FlightApp/flight-booking/flights
Optionen
Flight-
Component
FlightBooking-Component
DEMO
Page 17
App
Home
Flight
Booking
Passenger
Search
Flight
Search
Flight Edit
id
8. 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
12. 12
Aux-Routes
Page 35
Logo + Menu
Menu2
Footer
SPA
Placeholder
Named Placeholder
Aux-Routes
Page 36
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Named Placeholder
/FlightApp/flights
13. 13
Aux-Routes
Page 37
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(aux:info)
Aux-Routes
Page 38
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
14. 14
Aux-Routes
Page 39
Logo + Menu
Menu2
Footer
SPA Flight-Edit-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)/edit/17
DEMO
Page 40