Advanced Routing @AngularDays Spring 2022

Transcript

1. @ManfredSteyer Advanced Routing Manfred Steyer ANGULARarchitects.io ManfredSteyer
2. @ManfredSteyer Routen sind der Dreh- und Angelpunkt Ihrer Angular-Anwendung!
3. @ManfredSteyer Inhalt • Basics: Kurze Wiederholung • Hierarchisches Routing • Aux Routes • Guards • Resolver • Router Events • Lazy Loading und Preloading Page ▪ 3
4. @ManfredSteyer Manfred Steyer
5. @ManfredSteyer Angular Router Page ▪ 5
6. @ManfredSteyer Routing in Angular Page ▪ 6 Logo + Menü Menü 2 Fußzeile SPA Platzhalter
7. @ManfredSteyer Routing in Angular Page ▪ 7 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier
8. @ManfredSteyer Konfiguration Page ▪ 13 const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
9. @ManfredSteyer Konfiguration Page ▪ 16 // app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, RouterModule.forRoot(APP_ROUTES); ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild
10. @ManfredSteyer View von AppComponent Page ▪ 19 <a routerLink="/home">Home</a> <a routerLink="/flug-suchen">Flug suchen</a> <div> <router-outlet></router-outlet> </div>
11. @ManfredSteyer DEMO Page ▪ 26
12. @ManfredSteyer Hierarchisches Routing Page ▪ 27
13. @ManfredSteyer Hierarchische Views Page ▪ 28 Logo + Menü Menü 2 Fußzeile SPA Platzhalter 1
14. @ManfredSteyer Hierarchische Views Page ▪ 29 Logo + Menü Menü 2 Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
15. @ManfredSteyer Hierarchische Views Page ▪ 30 Logo + Menü Menü 2 Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen
16. @ManfredSteyer Hierarchische Views Page ▪ 31 Logo + Menü Menü 2 Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
17. @ManfredSteyer Konfiguration Page ▪ 32 const APP_ROUTES: Routes = [ { path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
18. @ManfredSteyer DEMO Page ▪ 33 App Home Flug buchen Flug suchen Flug editieren Passagier suchen Ihre Buchungen
19. @ManfredSteyer Aux-Routes Page ▪ 36
20. @ManfredSteyer Aux-Routes Page ▪ 37 Logo + Menu Menu 2 Footer SPA Placeholder Named Placeholder
21. @ManfredSteyer Aux-Routes Page ▪ 38 Logo + Menu Menu 2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights
22. @ManfredSteyer Aux-Routes Page ▪ 39 Logo + Menu Menu 2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
23. @ManfredSteyer Aux-Routes Page ▪ 40 Logo + Menu Menu 2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
24. @ManfredSteyer Aux-Routes Page ▪ 41 Logo + Menu Menu 2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
25. @ManfredSteyer Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche • Commander-Style Page ▪ 42
26. @ManfredSteyer Platzhalter definieren Page ▪ 43 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name: primary
27. @ManfredSteyer Konfiguration Page ▪ 44 export const ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'info', component: InfoComponent, outlet: 'aux' }, { path: 'dashboard', component: DashboardComponent, outlet: 'aux' } ]
28. @ManfredSteyer Aux-Routes routen Page ▪ 45 <a [routerLink]="[{outlets: { aux: 'info' }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
29. @ManfredSteyer 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>
30. @ManfredSteyer 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 }}]); } }
31. @ManfredSteyer DEMO Page ▪ 48
32. @ManfredSteyer Guards Page ▪ 49
33. @ManfredSteyer Was sind Guards? • Services • Können Aktivierung und Deaktivierung von Routen verhindern Page ▪ 50
34. @ManfredSteyer Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
35. @ManfredSteyer 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] }, […] ] ]
36. @ManfredSteyer Provider für Guards Page ▪ 56 // app.module.ts @NgModule({ providers: [ FlugEditGuard, AuthGuard ], […] }) export class AppModule { }
37. @ManfredSteyer DEMO Page ▪ 57
38. @ManfredSteyer Resolver
39. @ManfredSteyer 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
40. @ManfredSteyer Resolver @Injectable() export class FlightResolver implements Resolve<Flight> { constructor(private flightService: FlightService) { } resolve(route, state): Observable<Flight> | Promise<Flight> | Flight { return […] } }
41. @ManfredSteyer Resolver registrieren const FLIGHT_BOOKING_ROUTES: Routes = [ […] { path: 'flight-edit/:id', component: FlightEditComponent, resolve: { flight: FlightResolver } } ];
42. @ManfredSteyer Daten entgegennehmen @Component({ … }) export class FlightEditComponent { flight: Flight; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.data.subscribe( data => { this.flight = data['flight']; } ); } }
43. @ManfredSteyer DEMO
44. @ManfredSteyer Lazy Loading Page ▪ 65
45. @ManfredSteyer Warum Lazy Loading? • Module erst bei Bedarf nachladen • Verbesserung der Start-Performance Page ▪ 66
46. @ManfredSteyer 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' } ];
47. @ManfredSteyer Root Module mit Lazy Loading Page ▪ 68 const APP_ROUTE_CONFIG: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: () => import('[…]flight-booking.module') .then(m => m.FlightBookingModule); } ];
48. @ManfredSteyer Routen für Feature Module Page ▪ 69 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] }
49. @ManfredSteyer Routen für Feature Module Page ▪ 70 const FLUG_ROUTES = [ { path: 'subroute', component: FlugBuchenComponent, […] }, […] }
50. @ManfredSteyer DEMO Page ▪ 72
51. @ManfredSteyer Preloading Page ▪ 73
52. @ManfredSteyer 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 ▪ 74
53. @ManfredSteyer Preloading aktivieren Page ▪ 75 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
54. @ManfredSteyer Problem with Lazy Loading and Classic Providers
55. @ManfredSteyer Lazy Loading and Shared Modules Page ▪ 89 AppModule FlightBooking Module SharedModule includes includes (lazy) includes AuthService
56. @ManfredSteyer Lazy Loading and Shared Modules Page ▪ 90 AppModule FlightBooking Module SharedModule includes includes (lazy) includes AuthService AuthService
57. @ManfredSteyer Lazy Loading and Shared Modules Page ▪ 91 AppModule FlightBooking Module SharedModule includes includes (lazy) includes AuthService AuthService
58. @ManfredSteyer Solution 1: CoreModule Page ▪ 92 AppModule FlightBooking Module SharedModule includes (lazy) includes CoreModule includes includes Core-Module is only imported into the AppModule Global Providers + Shell
59. @ManfredSteyer Solution 2: forRoot Page ▪ 93 AppModule FlightBooking Module AuthModule includes (lazy) CoreModule
60. @ManfredSteyer Solution 2: forRoot Page ▪ 94 AppModule FlightBooking Module AuthModule includes (lazy) includes (with Services) CoreModule includes includes (without Services)
61. @ManfredSteyer AuthModule Page ▪ 95 @NgModule({ […], providers: [] }) export class AuthModule { }
62. @ManfredSteyer AuthModule Page ▪ 96 @NgModule({ […], providers: [] }) export class AuthModule { static forRoot(): ModuleWithProviders<AuthModule> { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
63. @ManfredSteyer DEMO Page ▪ 97
64. @ManfredSteyer Solution 3: Tree-shakable Provider Page ▪ 98 @Injectable({ providedIn: 'root' }) export class AuthService { […] }
65. @ManfredSteyer Tree-Shakable Provider for Lazy Modules
66. @ManfredSteyer Lazy Modules Page ▪ 100 @Injectable({ providedIn: LazyApiModule }) export class FlightService { […] } Only makes sense with lazy loading !! All "classic" modules: root scope Service is loaded alongside lazy module!
67. @ManfredSteyer Preventing Cycles
68. @ManfredSteyer Preventing Cycles
69. @ManfredSteyer DEMO
70. @ManfredSteyer Zusammenfassung Child Routes Aux Routes Guards Resolver Lazy Loading & Preloading
71. @ManfredSteyer Kontakt and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Slides & Examples Public and In-House http://www.softwarearchitekt.at/workshops