Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
The new Component Router
for Angular 2 and 1.x
Manfred Steyer
ManfredSteyer
Current Book
Folie 2
O'Reilly:
AngularJS: M...
2
Contents
Overview of Concepts and Scenarios
Getting started
DEMO with Angular 2
Lifecycle-Hooks
DEMO with Angular 2...
3
What is the Component Router?
Page  5
New Router-
Solution
Angular 2
and 1.x
Activating
Components
Lazy
Loading
Hierarc...
4
Routing
Page  7
Logo + Menü
Menü2
Fußzeile
SPA Flight
-Component
/FlightApp#/flights
Routing with History API
Page  8
...
5
Routing with Parameter
Page  9
Logo + Menü
Menü2
Fußzeile
SPA
Flight-Edit-
Component
for Flight #17
/FlightApp/flights/...
6
Hierarchical Routing
Page  12
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
FlightBooking-Component
Hierarchic...
7
Hierarchical Routing
Page  14
Logo + Menu
Menu2
Fußzeile
SPA
/FlightApp/flight-booking/flights
Optionen
Flight-
Compone...
8
Getting started
Page  16
Bundle: router.js ROUTER_PROVIDERS
ROUTER_DIRECTIVES
Getting started
 Hash-Strategy
 provide...
9
DEMO
Page  18
LIFECYCLE-HOOKS
Page  19
10
What are Lifecycle-Hooks?
Methods within Components
Are called at specific times ("events")
Page  20
Life-Cycle-Hook...
11
CanActivate and CanDeactivate
Possible Results
true
false
Promise
Resolve with true or false
Page  22
DEMO
Page ...
12
AUX-ROUTES
Page  24
Aux-Routes
Page  25
Logo + Menu
Menu2
Footer
SPA
Placeholder
Named Placeholder
13
Aux-Routes
Page  26
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Named Placeholder
/FlightApp/flights
Aux-Routes
Pag...
14
Aux-Routes
Page  28
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Info-Component
/FlightApp/flights(info/modal)/edit/...
15
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact
Upcoming SlideShare
Loading in …5
×

The new component router for Angular 2 and 1.x

188 views

Published on

Presentation from ng-nl in Amstardam, 2016

Published in: Internet
  • Be the first to comment

  • Be the first to like this

The new component router for Angular 2 and 1.x

  1. 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. 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. 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. 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. 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. 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. 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. 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. 9 DEMO Page  18 LIFECYCLE-HOOKS Page  19
  10. 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. 11 CanActivate and CanDeactivate Possible Results true false Promise Resolve with true or false Page  22 DEMO Page  23
  12. 12. 12 AUX-ROUTES Page  24 Aux-Routes Page  25 Logo + Menu Menu2 Footer SPA Placeholder Named Placeholder
  13. 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. 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. 15 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Contact

×