Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Routing @AngularDays, October 2018, Berlin

Advanced Routing @AngularDays, October 2018, Berlin

This slide deck and the examples show:

- Child Routes
- Aux Routes
- Guards
- Resolver
- Events
- Lazy Loading
- Preloading

# Examples
https://github.com/manfredsteyer/AngularDays_Berlin_2018_Routing

#More: Trainings and Workshops
https://www.softwarearchitekt.at/

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

October 10, 2018
Tweet

Transcript

  1. Advanced Routing Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer ManfredSteyer

  2. About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular Trainings

    and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer Public: Vienna, München, Zürich In-House: everywhere http://softwarearchitekt.at/workshops
  3. Inhalt • Basics: Kurze Wiederholung • Hierarchisches Routing • Aux

    Routes • Guards • Resolver • Lazy Loading und Preloading Page ▪ 3
  4. Why advanced Routing? The Router is the linchpin of every

    SPA
  5. Routing in Angular Page ▪ 7 Logo + Menü Menü

    2 Fußzeile SPA Platzhalter
  6. Routing in Angular Page ▪ 8 Logo + Menü Menü

    2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier
  7. Konfiguration Page ▪ 14 const APP_ROUTES: Routes = [ {

    path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
  8. Konfiguration Page ▪ 17 export const AppRoutesModule = RouterModule.forRoot(APP_ROUTES); //

    app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, AppRoutesModule ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild
  9. View von AppComponent Page ▪ 19 <a [routerLink]="'/home'">Home</a> <a [routerLink]="'/flug-suchen'">Flug

    suchen</a> <div> <router-outlet></router-outlet> </div>
  10. DEMO Page ▪ 27

  11. Hierarchisches Routing Page ▪ 28

  12. Hierarchische Views Page ▪ 29 Logo + Menü Menü 2

    Fußzeile SPA Platzhalter 1
  13. Hierarchische Views Page ▪ 30 Logo + Menü Menü 2

    Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
  14. Hierarchische Views Page ▪ 31 Logo + Menü Menü 2

    Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen
  15. Hierarchische Views Page ▪ 32 Logo + Menü Menü 2

    Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
  16. Konfiguration Page ▪ 33 const APP_ROUTES: Routes = [ {

    path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
  17. DEMO Page ▪ 34 App Home Flug buchen Flug suchen

    Flug editieren Passagier suchen Ihre Buchungen
  18. Aux-Routes Page ▪ 37

  19. Aux-Routes Page ▪ 38 Logo + Menu Menu 2 Footer

    SPA Placeholder Named Placeholder
  20. Aux-Routes Page ▪ 39 Logo + Menu Menu 2 Footer

    SPA Flight- Component Named Placeholder /FlightApp/flights
  21. Aux-Routes Page ▪ 40 Logo + Menu Menu 2 Footer

    SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
  22. Aux-Routes Page ▪ 41 Logo + Menu Menu 2 Footer

    SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
  23. Aux-Routes Page ▪ 42 Logo + Menu Menu 2 Footer

    SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
  24. Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche

    • Commander-Style Page ▪ 43
  25. Platzhalter definieren Page ▪ 44 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name:

    primary
  26. Konfiguration Page ▪ 45 export const ROUTE_CONFIG: Routes = [

    { path: 'home', component: HomeComponent }, { path: 'info', component: InfoComponent, outlet: 'aux' }, { path: 'dashboard', component: DashboardComponent, outlet: 'aux' } ]
  27. Aux-Routes routen Page ▪ 46 <a [routerLink]="[{outlets: { aux: 'info'

    }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
  28. Mehrere Outlets gleichzeitig bestücken <a [routerLink]="[{outlets: { aux: 'basket', primary:

    'flight-booking/flight-search' }}]"> … </a> <a [routerLink]="[{outlets: { aux: 'basket', primary: ['flight-booking', 'flight-search'] }}]"> … </a> <a [routerLink]="[{outlets: { aux: 'basket', primary: ['flight-booking', 'flight-edit', 17] }}]"> … </a>
  29. Programmatisch routen Page ▪ 48 export class AppComponent { constructor(private

    router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }
  30. DEMO Page ▪ 49

  31. Guards Page ▪ 50

  32. Was sind Guards? • Services • Werden beim Aktivieren bzw.

    Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 51
  33. Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild

    canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
  34. Guards in der Konfiguration Page ▪ 54 const APP_ROUTES: Routes

    = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ]
  35. Provider für Guards Page ▪ 57 // app.module.ts @NgModule({ providers:

    [ FlugEditGuard, AuthGuard ], […] }) export class AppModule { }
  36. DEMO Page ▪ 58

  37. Resolver

  38. Was sind Resolver? • Services • Werden beim Routenwechsel aktiv

    • Verzögern Aktivierung der neuen Route • Laden benötigte Daten • Zwischenzeitlich kann z. B. Loading Indikator angezeigt werden
  39. Resolver @Injectable() export class FlightResolver implements Resolve<Flight> { constructor(private flightService:

    FlightService) { } resolve(route, state): Observable<Flight> | Promise<Flight> | Flight { return […] } }
  40. Resolver registrieren const FLIGHT_BOOKING_ROUTES: Routes = [ […] { path:

    'flight-edit/:id', component: FlightEditComponent, resolve: { flight: FlightResolver } } ];
  41. Daten entgegennehmen @Component({ … }) export class FlightEditComponent { flight:

    Flight; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.data.subscribe( data => { this.flight = data['flight']; } ); } }
  42. DEMO

  43. Lazy Loading Page ▪ 66

  44. Warum Lazy Loading? • Module erst bei Bedarf nachladen •

    Verbesserung der Start-Performance Page ▪ 67
  45. Root Module mit Lazy Loading Page ▪ 68 const APP_ROUTE_CONFIG:

    Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: '[…]flight-booking.module#FlightBookingModule' } ];
  46. Routen für Feature Module Page ▪ 69 const FLUG_ROUTES =

    [ { path: 'subroute', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
  47. Konfiguration von Webpack • @ngtools/webpack loader Page ▪ 70

  48. DEMO Page ▪ 71

  49. Preloading Page ▪ 72

  50. Idee • Eventuell später benötigte Module werden mit freien Ressourcen

    vorgeladen • Wird das Modul später tatsächlich benötigt, steht es augenblicklich zur Verfügung Page ▪ 73
  51. Preloading aktivieren Page ▪ 74 export const AppRoutesModule = RouterModule.forRoot(

    ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
  52. Zusammenfassung Child Routes Aux Routes Guards Resolver Lazy Loading &

    Preloading
  53. Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d

    http://softwarearchitekt.at/workshops Slides & Examples