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

Advanced Angular Routing, Workshop at AngularDa...

Advanced Angular Routing, Workshop at AngularDays, March 2018 in Munich

Avatar for Manfred Steyer

Manfred Steyer

March 20, 2018
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

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

    and Consultancy • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  2. Inhalt • Basics: Kurze Wiederholung • Hierarchisches Routing • Aux

    Routes • Guards • Resolver • Lazy Loading und Preloading Page ▪ 3
  3. Routing in Angular Page ▪ 7 Logo + Menü Menü

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

    path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
  5. Konfiguration Page ▪ 16 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
  6. Hierarchische Views Page ▪ 29 Logo + Menü Menü 2

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

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

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

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

    Flug editieren Passagier suchen Ihre Buchungen
  11. Aux-Routes Page ▪ 37 Logo + Menu Menu 2 Footer

    SPA Placeholder Named Placeholder
  12. Aux-Routes Page ▪ 38 Logo + Menu Menu 2 Footer

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

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

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

    SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
  16. Konfiguration Page ▪ 44 export const ROUTE_CONFIG: Routes = [

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

    }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
  18. 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>
  19. Programmatisch routen Page ▪ 47 export class AppComponent { constructor(private

    router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }
  20. Was sind Guards? • Services • Werden beim Aktivieren bzw.

    Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 50
  21. Guards in der Konfiguration Page ▪ 53 const APP_ROUTES: Routes

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

    [ FlugEditGuard, AuthGuard ], […] }) export class AppModule { }
  23. 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
  24. Resolver @Injectable() export class FlightResolver implements Resolve<Flight> { constructor(private flightService:

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

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

    Flight; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.data.subscribe( data => { this.flight = data['flight']; } ); } }
  27. Warum Lazy Loading? • Module erst bei Bedarf nachladen •

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

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

    [ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
  30. 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 ▪ 72
  31. Preloading aktivieren Page ▪ 73 export const AppRoutesModule = RouterModule.forRoot(

    ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
  32. Lazy Loading und Shared Modules Page ▪ 75 AppModule FlugModule

    SharedModule includes includes (lazy) includes
  33. Lazy Loading und Shared Modules Page ▪ 76 AppModule FlugModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  34. Lazy Loading und Shared Modules Page ▪ 77 AppModule FlugModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  35. Lösung Page ▪ 78 AppModule FlugModule SharedModule includes (lazy) includes

    CoreModule includes includes Core-Module soll nur ins AppModule eingebunden werden Globale Provider, wie AuthService & Shell
  36. Lösung (für Libraries) Page ▪ 81 AppModule FlugModule AuthModule includes

    (lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell
  37. AuthModule Page ▪ 84 @NgModule({ […], providers: [] }) export

    class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }