Der Router in Angular im Detail betrachtet

Folien von Vortrag von BASTA! Spring 2017 in Frankfurt

Transcript

1. Der Router in Angular im Detail betrachtet Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page  2 Manfred Steyer
3. Ziel • Den Router kennen lernen • Erweiterte Möglichkeiten kennen lernen
4. Inhalt • Basics zu Routing • Child-Routes • Aux-Routes • Guards • Lazy Loading Page  4
5. Motivation Der Router ist der Dreh- und Angelpunkt vieler SPA
6. Basics Page  6
7. Warum Routing? • SPAs bestehen aus einer Seite • Seiten simulieren  Routen • Url sollte auf Route hinweisen • Bookmarks • Back-Button • Router unterstützen hierbei Page  7
8. Routing unter AngularJS Page  8 Logo + Menü Menü 2 Fußzeile SPA Platzhalter
9. Routing unter AngularJS Page  9 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo#passagier
10. Routing unter AngularJS Page  10 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier
11. Routen als Url-Segmente • /FlugDemo/passagier • History API • Gesamte Url wird zum Server gesendet • Server antwortet mit SPA • Server kann erste Ansicht "vorrendern" • Performance, SEO, … • Festlegen der Grenze zwischen URL und Route bei History API: • <base href="/FlugDemo"> • Oder: Token APP_BASE_HREF (@angular/common) Page  11
12. Konfiguration Page  12 const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent }, { path: '**', redirectTo: 'home' } ]
13. Konfiguration Page  13 export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG); // app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, AppRoutesModule ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild
14. View von AppComponent Page  14 <a [routerLink]="'/'">Home</a> <a [routerLink]="'/flug-suchen'">Flug suchen</a> <div> <router-outlet></router-outlet> </div>
15. Parameter • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page  17
16. Parameter Page  18 const APP_ROUTES: Routes = [ […] { path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }
17. Parameter auslesen Page  19 export class FlugEditComponent { public id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
18. Links auf Routen mit Parameter Page  20 <a [routerLink]="['/flug-edit', flug.id]">Edit</a>
19. DEMO
20. Hierarchisches Routing Page  22
21. Hierarchische Views Page  23 Logo + Menü Menü 2 Fußzeile SPA Platzhalter 1
22. Hierarchische Views Page  24 Logo + Menü Menü 2 Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
23. Hierarchische Views Page  25 Logo + Menü Menü 2 Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen
24. Hierarchische Views Page  26 Logo + Menü Menü 2 Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
25. Konfiguration Page  27 const FLIGHT_ROUTES: Routes = [ […] { path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
26. DEMO Page  28 App Home Flug buchen Flug suchen Flug editieren Passagier suchen
27. Aux-Routes Page  29
28. Aux-Routes Page  30 Logo + Menu Menu 2 Footer SPA Placeholder Named Placeholder
29. Aux-Routes Page  31 Logo + Menu Menu 2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights
30. Aux-Routes Page  32 Logo + Menu Menu 2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
31. Aux-Routes Page  33 Logo + Menu Menu 2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
32. Aux-Routes Page  34 Logo + Menu Menu 2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
33. Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche • Commander-Style Page  35
34. Platzhalter definieren Page  36 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name: primary
35. Konfiguration Page  37 export const ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'info', component: InfoComponent, outlet: 'aux' }, { path: 'dashboard', component: DashboardComponent, outlet: 'aux' } ]
36. Aux-Routes routen Page  38 <a [routerLink]="[{outlets: { aux: 'info' }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
37. Programmatisch routen Page  39 export class AppComponent { constructor(private router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }
38. DEMO Page  40
39. Guards Page  41
40. Was sind Guards? • Services • Werden beim Aktivieren bzw. Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page  42
41. Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
42. 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
43. Provider für Guards Page  46 export const ROUTER_PROVIDERS = [ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ];
44. Provider für Guards Page  47 export const ROUTER_PROVIDERS = [ FlugEditGuard, AuthGuard ]; // app.module.ts @NgModule({ providers: [ ROUTER_PROVIDERS ], […] }) export class AppModule { }
45. DEMO Page  48
46. Lazy Loading
47. Root Module mit Lazy Loading Page  56 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
48. Routen für Feature Module Page  57 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
49. Konfiguration von Webpack • angular2-router-loader Page  58
50. DEMO
51. Preloading Page  60
52. 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
53. Preloading aktivieren Page  62 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
54. Lazy Loading und Shared Services Page  63
55. Lazy Loading und Shared Modules Page  64 AppModule FlugModule SharedModule includes includes (lazy) includes
56. Lazy Loading und Shared Modules Page  65 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
57. Lazy Loading und Shared Modules Page  66 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
58. 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
59. DEMO
60. Lösung (für Libraries) Page  69 AppModule FlugModule AuthModule includes (lazy) CoreModule
61. Lösung (für Libraries) Page  70 AppModule FlugModule AuthModule includes (lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell
62. Zusammenfassung Platzhalter Child Routes Aux Routes Guards
63. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer