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
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