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

Routing into the Sunset with Angular

Routing into the Sunset with Angular

Talk from International JavaScript Conference in Munich, October 2017

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

October 24, 2017
Tweet

Transcript

  1. Routing into the Sunset with Angular Manfred Steyer ManfredSteyer

  2. About me… • Manfred Steyer • SOFTWAREarchitekt.at • Trainer &

    Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
  3. Contents • Basics • Child Routes • Aux Routes •

    Guards • Lazy Loading
  4. Angular Router Page ▪ 4

  5. Routing in Angular Page ▪ 5 Logo + Menu Menu

    2 Footer SPA Placeholder
  6. Routing in Angular Page ▪ 6 Logo + Menu Menu

    2 Footer SPA Passenger- Component /FlightApp/passenger
  7. Configuration Page ▪ 7 const APP_ROUTES: Routes = [ {

    path: 'home', component: HomeComponent }, { path: 'flight-search', component: FlightSearchComponent }, { path: '**', redirectTo: 'home' } ]
  8. Configuration Page ▪ 8 // app.module.ts @NgModule({ imports: [ BrowserModule,

    HttpModule, FormsModule, RouterModule.forRoot(ROUTE_CONFIG) ], […] }) export class AppModule { } For Root-Module For Feature-Module: forChild
  9. AppComponent Page ▪ 9 <a routerLink="/home">Home</a> <a routerLink="/flight-search">Flight Search</a> <div>

    <router-outlet></router-outlet> </div>
  10. Parameters • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page

    ▪ 10
  11. Parameters Page ▪ 11 const APP_ROUTES: Routes = [ […]

    { path: 'flight-search', component: FlightSearchComponent }, { path: 'flight-edit/:id', component: FlightEditComponent } }
  12. Reading Parameters Page ▪ 12 export class FlightEditComponent { public

    id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
  13. Links for Routen with Parameters Page ▪ 13 <a [routerLink]="['/flight-edit',

    flug.id, {showDetails: true}]">Edit</a>
  14. Hierarchical Routing Page ▪ 14

  15. Hierarchical Routing Page ▪ 15 Logo + Menu Menu 2

    Footer SPA Placeholder 1
  16. Hierarchical Routing Page ▪ 16 Logo + Menu Menu 2

    Footer SPA /FlightDemo/flight-booking FlightBookingComponent
  17. Hierarchical Routing Page ▪ 17 Logo + Menu Menu 2

    Footer SPA Options Placeholder FlightBookingComponent /FlightDemo/flight-booking
  18. Hierarchical Routing Page ▪ 18 Logo + Menu Menu 2

    Footer SPA Optionen Passenger Component FlightBookingComponent /FlightDemo/flight-booking/passenger
  19. Configuration Page ▪ 19 const APP_ROUTES: Routes = [ {

    path: '', component: HomeComponent }, { path: 'flight-booking', component: FlightBookingComponent, children: [ { path: 'flight-search', component: FlightSearchComponent }, […] ] } ];
  20. DEMO Page ▪ 20 App Home Flight Booking Flight Search

    Flight Edit Passenger Search Other Stuff
  21. Aux Routes

  22. Aux-Routes Page ▪ 22 Logo + Menu Menu 2 Footer

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

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

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

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

    SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/edit/17
  27. Use Cases • Partly autonomous parts of an application •

    „Norton Commander Style“ • (CSS-based) Popups and Modals
  28. DEMO Page ▪ 28

  29. Guards Page ▪ 29

  30. What are Guard? • Services • Can prevent the Activation

    or Deactivation of a Route Page ▪ 30
  31. Guards Result: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild

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

    = [ { path: '/flight-booking', component: FlightBookingComponent, canActivate: [AuthGuard], children: [ { path: 'flight-edit/:id', component: FlightEditComponent, canDeactivate: [FlightEditGuard] }, […] ] ] Token
  33. Provider für Guards Page ▪ 35 // app.module.ts @NgModule({ providers:

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

  35. Lazy Loading

  36. Root Module with Lazy Loading Page ▪ 45 const APP_ROUTE_CONFIG:

    Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
  37. Routes for Feature Module Page ▪ 46 const FLIGHT_ROUTES =

    [ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
  38. Preloading

  39. Idea • Modules that might be needed later are loaded

    after (!) the start of the application • When the module is actually needed, it is available immediately Page ▪ 49
  40. Activating Preloading Page ▪ 50 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,

    { preloadingStrategy: PreloadAllModules });
  41. Lazy Loading and Shared Modules Page ▪ 51

  42. DEMO Page ▪ 52

  43. Lazy Loading and Shared Modules Page ▪ 53 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService
  44. Lazy Loading and Shared Modules Page ▪ 54 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  45. Lazy Loading and Shared Modules Page ▪ 55 AppModule FlightModule

    SharedModule includes includes (lazy) includes AuthService AuthService
  46. Solution Page ▪ 56 AppModule FlightModule SharedModule includes (lazy) includes

    CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell
  47. DEMO

  48. Huge CoreModule? Page ▪ 58 AppModule FlightModule SharedModule includes (lazy)

    includes CoreModule includes includes
  49. Solution Page ▪ 59 AppModule FlightModule AuthModule includes (lazy) CoreModule

  50. Solution Page ▪ 60 AppModule FlightModule AuthModule includes (lazy) includes

    (with Services) CoreModule includes includes (without Services)
  51. Auth Module Page ▪ 61 @NgModule({ […], providers: [] })

    export class AuthModule { }
  52. Auth Module Page ▪ 62 @NgModule({ […], providers: [] })

    export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
  53. DEMO Page ▪ 63

  54. Conclusion Child Routes Aux Routes Guards Lazy Loading

  55. Downloads and Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer