The document discusses the new component router for Angular 2 and 1.x, detailing features like lazy loading, hierarchical routing, and lifecycle hooks. It includes an overview of concepts, getting started instructions, and various demos showcasing routing with parameters and aux routes. The document serves as a comprehensive guide for implementing routing solutions in Angular applications.

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