(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
Der neueste neue Router (Version 3) für Angular 2
1. 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. 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
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. 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
+ Child-Router
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
11. 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
Flight
Search
Passenger
Search
Passenger
Edit
id
AUX-ROUTES
Page 33
12. 12
Aux-Routes
Page 34
Logo + Menu
Menu2
Footer
SPA
Placeholder
Named Placeholder
Aux-Routes
Page 35
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Named Placeholder
/FlightApp/flights
13. 13
Aux-Routes
Page 36
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(aux:info)
Aux-Routes
Page 37
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
14. 14
Aux-Routes
Page 38
Logo + Menu
Menu2
Footer
SPA Flight-Edit-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)/edit/17
DEMO
Page 39
15. 15
Summary
Component Router: New Routing-Solution for Angular
2 and AngularJS 1.x
Lazy Loading
Hierarchical Routing
Guards
Aux Routes
Page 40
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact