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 "newest new" Router
for Angular 2
Manfred Steyer
ManfredSteyer
About me …
 Manfred Steyer
 SOFTWAREarchitekt.at
 ...
2
ngEurope
Page  3
Contents
 (Quick) Overview of Concepts and Scenarios
 DEMO with Angular 2
 Guards
 DEMO
 Aux-Rout...
3
OVERVIEW
Page  6
What is the Component Router?
Page  7
New Router-
Solution
Angular 2
and 1.x
Activating
Components
La...
4
Short History
Page  8
• Core: Stable
• Moving Parts beyond the core
• New Router/ Component Router
• Breaking Changes: ...
5
Routing with History API
Page  11
Logo + Menü
Menü2
Fußzeile
SPA Flight
-Component
/FlightApp/flights
Routing with Para...
6
Hierarchical Routing
Page  14
Logo + Menu
Menu2
Footer
SPA
Placeholder
Hierarchical Routing
Page  15
Logo + Menu
Menu2...
7
Hierarchical Routing
Page  16
Logo + Menu
Menu2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
FlightBooking-...
8
DEMO
Page  18
App
Home
Flight
Booking
Passenger
Search
Flight
Search
Flight Edit
id
GUARDS
Page  19
9
What are Guards?
Services
Can get other services via DI
Router triggers Guards before activating/
deactivating Compon...
10
Configuring Guards
Page  22
const APP_ROUTES: RouterConfig = [
{
path: '/flug-buchen',
component: FlugBuchenComponent,...
11
Provider for Guards
Page  24
export const APP_ROUTER_PROVIDER = [
provideRouter(APP_ROUTES),
FlightEditGuard,
AuthGuar...
12
AUX-ROUTES
Page  35
Aux-Routes
Page  36
Logo + Menu
Menu2
Footer
SPA
Placeholder
Named Placeholder
13
Aux-Routes
Page  37
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Named Placeholder
/FlightApp/flights
Aux-Routes
Pag...
14
Aux-Routes
Page  39
Logo + Menu
Menu2
Footer
SPA Flight-
Component
Modal-Component
/FlightApp/flights(aux:info/modal)
...
15
DEMO
Page  41
LAZY LOADING
Page  42
16
1
4
3
2
Lazy Loading
[Green, Kremer: Keynote, ngconf 2016, https://goo.gl/B7pVBb]
Current State
Hooks available but no...
17
Announced
Page  45
Early bits
Early implementation!
Not in current RC
Not documented so far
General Rule for Angul...
18
Outlook (Github Repo, 13. 7. 2016)
Page  47
Summary
 Component Router: New Routing-Solution for Angular
2 and Angular...
19
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact
Upcoming SlideShare
Loading in …5
×

The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016

336 views

Published on

The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016

Published in: Internet
  • Be the first to comment

The newst new Router for Angular 2 - Talk at @angular_berlin, July 2016

  1. 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. 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. 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. 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. 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. 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. 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
  8. 8. 8 DEMO Page  18 App Home Flight Booking Passenger Search Flight Search Flight Edit id GUARDS Page  19
  9. 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>
  10. 10. 10 Configuring Guards Page  22 const APP_ROUTES: RouterConfig = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlightEditGuard] }, […] ] ] Token Provider for Guards Page  23 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), { provide: FlightEditGuard, useClass: FlightEditGuard }, { provide: AuthGuard, useClass: AuthGuard } ];
  11. 11. 11 Provider for Guards Page  24 export const APP_ROUTER_PROVIDER = [ provideRouter(APP_ROUTES), FlightEditGuard, AuthGuard ]; DEMO Page  32
  12. 12. 12 AUX-ROUTES Page  35 Aux-Routes Page  36 Logo + Menu Menu2 Footer SPA Placeholder Named Placeholder
  13. 13. 13 Aux-Routes Page  37 Logo + Menu Menu2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights Aux-Routes Page  38 Logo + Menu Menu2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
  14. 14. 14 Aux-Routes Page  39 Logo + Menu Menu2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal) Aux-Routes Page  40 Logo + Menu Menu2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/edit/17
  15. 15. 15 DEMO Page  41 LAZY LOADING Page  42
  16. 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. 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. 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
  19. 19. 19 manfred.steyer@SOFTWAREarchitekt.at SOFTWAREarchitekt.at ManfredSteyer Contact

×