Der Angular Router im Detail

Session from BASTA! 2017, Mainz (Germany)

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 in Angular Page ▪ 8 Logo + Menü Menü 2 Fußzeile SPA Platzhalter
9. Routing in Angular Page ▪ 10 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier
10. Konfiguration Page ▪ 12 const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent }, { path: '**', redirectTo: 'home' } ]
11. 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
12. View von AppComponent Page ▪ 14 <a routerLink="/">Home</a> <a routerLink="/flug-suchen">Flug suchen</a> <div> <router-outlet></router-outlet> </div>
13. Parameter • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page ▪ 17
14. Parameter Page ▪ 18 const APP_ROUTES: Routes = [ […] { path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }
15. Parameter auslesen Page ▪ 19 export class FlugEditComponent { public id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
16. Links auf Routen mit Parameter Page ▪ 20 <a [routerLink]="['/flug-edit', flug.id]">Edit</a>
17. DEMO
18. Hierarchisches Routing Page ▪ 22
19. Hierarchische Views Page ▪ 23 Logo + Menü Menü 2 Fußzeile SPA Platzhalter 1
20. Hierarchische Views Page ▪ 24 Logo + Menü Menü 2 Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
21. Hierarchische Views Page ▪ 25 Logo + Menü Menü 2 Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen
22. Hierarchische Views Page ▪ 26 Logo + Menü Menü 2 Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
23. Konfiguration Page ▪ 27 const FLIGHT_ROUTES: Routes = [ […] { path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
24. DEMO Page ▪ 28 App Home Flug buchen Flug suchen Flug editieren Passagier suchen
25. Aux-Routes Page ▪ 29
26. Aux-Routes Page ▪ 30 Logo + Menu Menu 2 Footer SPA Placeholder Named Placeholder
27. Aux-Routes Page ▪ 31 Logo + Menu Menu 2 Footer SPA Flight- Component Named Placeholder /FlightApp/flights
28. Aux-Routes Page ▪ 32 Logo + Menu Menu 2 Footer SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
29. Aux-Routes Page ▪ 33 Logo + Menu Menu 2 Footer SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
30. Aux-Routes Page ▪ 34 Logo + Menu Menu 2 Footer SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
31. Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche • Commander-Style Page ▪ 35
32. Platzhalter definieren Page ▪ 36 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name: primary
33. Konfiguration Page ▪ 37 export const ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'info', component: InfoComponent, outlet: 'aux' }, { path: 'dashboard', component: DashboardComponent, outlet: 'aux' } ]
34. Aux-Routes routen Page ▪ 38 <a [routerLink]="[{outlets: { aux: 'info' }}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
35. DEMO Page ▪ 40
36. Guards Page ▪ 41
37. Was sind Guards? • Services • Werden beim Aktivieren bzw. Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 42
38. Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
39. 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
40. Provider für Guards Page ▪ 46 export const ROUTER_PROVIDERS = [ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ];
41. Provider für Guards Page ▪ 47 export const ROUTER_PROVIDERS = [ FlugEditGuard, AuthGuard ]; // app.module.ts @NgModule({ providers: [ ROUTER_PROVIDERS ], […] }) export class AppModule { }
42. DEMO Page ▪ 48
43. Lazy Loading
44. Root Module mit Lazy Loading Page ▪ 56 const APP_ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
45. Routen für Feature Module Page ▪ 57 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
46. DEMO
47. Preloading Page ▪ 60
48. 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
49. Preloading aktivieren Page ▪ 62 RouterModule.forRoot(ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
50. Lazy Loading und Shared Services Page ▪ 63
51. Lazy Loading und Shared Modules Page ▪ 64 AppModule FlugModule SharedModule includes includes (lazy) includes
52. Lazy Loading und Shared Modules Page ▪ 65 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
53. Lazy Loading und Shared Modules Page ▪ 66 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService
54. 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
55. DEMO
56. Lösung (für Libraries) Page ▪ 69 AppModule FlugModule AuthModule includes (lazy) CoreModule
57. Lösung (für Libraries) Page ▪ 70 AppModule FlugModule AuthModule includes (lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell
58. Zusammenfassung Platzhalter Child Routes Aux Routes Guards
59. Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer