Presentation from ng-nl in Amstardam, 2016

1. 1
The new Component Router
for Angular 2 and 1.x
Manfred Steyer
ManfredSteyer
Current Book
Folie 2
O'Reilly:
AngularJS: Moderne
Webanwendungen und Single Page
Applications mit JavaScript
Steyer, Softic

2. 2
Contents
Overview of Concepts and Scenarios
Getting started
DEMO with Angular 2
Lifecycle-Hooks
DEMO with Angular 2
DEMO with Angular 1.x
Aux-Routes
Page  3
OVERVIEW
Page  4

3. 3
What is the Component Router?
Page  5
New Router-
Solution
Angular 2
and 1.x
Activating
Components
Lazy
Loading
Hierarchical
Routing
Lifecycle-
Hooks
Routing
Page  6
Logo + Menu
Menu2
Footer
SPA
Placeholder

4. 4
Routing
Page  7
Logo + Menü
Menü2
Fußzeile
SPA Flight
-Component
/FlightApp#/flights
Routing with History API
Page  8
Logo + Menü
Menü2
Fußzeile
SPA Flight
-Component
/FlightApp/flights

5. 5
Routing with Parameter
Page  9
Logo + Menü
Menü2
Fußzeile
SPA
Flight-Edit-
Component
for Flight #17
/FlightApp/flights/17
Hierarchical Routing
Page  11
Logo + Menu
Menu2
Footer
SPA
Placeholder

6. 6
Hierarchical Routing
Page  12
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
FlightBooking-Component
Hierarchical Routing
Page  13
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
FlightBooking-Component
+ Child-Router

7. 7
Hierarchical Routing
Page  14
Logo + Menu
Menu2
Fußzeile
SPA
/FlightApp/flight-booking/flights
Optionen
Flight-
Component
FlightBooking-Component
GETTING STARTED
Page  15

8. 8
Getting started
Page  16
Bundle: router.js ROUTER_PROVIDERS
ROUTER_DIRECTIVES
Getting started
 Hash-Strategy
 provide(LocationStrategy,
{useClass: HashLocationStrategy})
 Path-Strategy (History API)
 Default
 Base-Url via <base href="…"> or APP_BASE_HREF
Page  17

9. 9
DEMO
Page  18
LIFECYCLE-HOOKS
Page  19

10. 10
What are Lifecycle-Hooks?
Methods within Components
Are called at specific times ("events")
Page  20
Life-Cycle-Hooks
OnActivate routerOnActivate
OnDeactivate routerOnDeactivate
CanDeactivate routerCanDeactivate
@CanActivate

11. 11
CanActivate and CanDeactivate
Possible Results
true
false
Promise
Resolve with true or false
Page  22
DEMO
Page  23

12. 12
AUX-ROUTES
Page  24
Aux-Routes
Page  25
Logo + Menu
Menu2
Footer
SPA
Placeholder
Named Placeholder

13. 13
Aux-Routes
Page  26
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Named Placeholder
/FlightApp/flights
Aux-Routes
Page  27
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(info)

14. 14
Aux-Routes
Page  28
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(info/modal)/edit/17
Summary
 Component Router: New Routing-Solution for Angular
2 and AngularJS 1.x
 Lazy Loading
 Hierarchical Routing
 Lifecycle-Hooks
 Aux Routes
Page  29

15. 15
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact