Top 10 Interactive Website Design Trends in 2024.pptx
The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016
1. 1
The "newest new" Router
for Angular 2
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
SOFTWAREarchitekt.at
Trainer & Consultant
Focus: Angular
Page 2
ManfredSteyer
2. 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
3. 3
OVERVIEW
Page 6
What is the Component Router?
Page 7
New Router-
Solution
Angular 2
and 1.x
Activating
Components
Lazy
Loading
Hierarchical
Routing
Guards
Replacement for Lifecycle-Hooks
Almost here …
4. 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
Menu2
Footer
SPA
Placeholder
5. 5
Routing with History API
Page 11
Logo + Menü
Menü2
Fußzeile
SPA Flight
-Component
/FlightApp/flights
Routing with Parameter
Page 12
Logo + Menü
Menü2
Fußzeile
SPA
Flight-Edit-
Component
for Flight #17
/FlightApp/flights/17
6. 6
Hierarchical Routing
Page 14
Logo + Menu
Menu2
Footer
SPA
Placeholder
Hierarchical Routing
Page 15
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
FlightBooking-Component
7. 7
Hierarchical Routing
Page 16
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
FlightBooking-Component
Hierarchical Routing
Page 17
Logo + Menu
Menu2
Fußzeile
SPA
/FlightApp/flight-booking/flights
Optionen
Flight-
Component
FlightBooking-Component
9. 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>
16. 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
17. 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
18. 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