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

Der Angular Router im Detail

Der Angular Router im Detail

Session from BASTA! 2017, Mainz (Germany)

Manfred Steyer

September 27, 2017
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer

    & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  2. Warum Routing? • SPAs bestehen aus einer Seite • Seiten

    simulieren  Routen • Url sollte auf Route hinweisen • Bookmarks • Back-Button • Router unterstützen hierbei Page ▪ 7
  3. Routing in Angular Page ▪ 10 Logo + Menü Menü

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

    path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent }, { path: '**', redirectTo: 'home' } ]
  5. Konfiguration Page ▪ 13 // app.module.ts @NgModule({ imports: [ BrowserModule,

    HttpModule, FormsModule, RouterModule.forRoot(ROUTE_CONFIG) ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild
  6. Parameter Page ▪ 18 const APP_ROUTES: Routes = [ […]

    { path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }
  7. Parameter auslesen Page ▪ 19 export class FlugEditComponent { public

    id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
  8. Hierarchische Views Page ▪ 24 Logo + Menü Menü 2

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

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

    Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
  11. Konfiguration Page ▪ 27 const FLIGHT_ROUTES: Routes = [ […]

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

    Flug editieren Passagier suchen
  13. Aux-Routes Page ▪ 30 Logo + Menu Menu 2 Footer

    SPA Placeholder Named Placeholder
  14. Aux-Routes Page ▪ 31 Logo + Menu Menu 2 Footer

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

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

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

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

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

    }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
  20. Was sind Guards? • Services • Werden beim Aktivieren bzw.

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

    = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ] Token
  22. Provider für Guards Page ▪ 46 export const ROUTER_PROVIDERS =

    [ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ];
  23. Provider für Guards Page ▪ 47 export const ROUTER_PROVIDERS =

    [ FlugEditGuard, AuthGuard ]; // app.module.ts @NgModule({ providers: [ ROUTER_PROVIDERS ], […] }) export class AppModule { }
  24. Root Module mit Lazy Loading Page ▪ 56 const APP_ROUTE_CONFIG:

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

    [ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
  26. 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 ▪ 61
  27. Lazy Loading und Shared Modules Page ▪ 64 AppModule FlugModule

    SharedModule includes includes (lazy) includes
  28. Lazy Loading und Shared Modules Page ▪ 65 AppModule FlugModule

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

    SharedModule includes includes (lazy) includes AuthService AuthService
  30. Lösung Page ▪ 67 AppModule FlugModule SharedModule includes (lazy) includes

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

    (lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell