Advanced Routing @Angular Days 2020 Berlin/Online

Slide 1

Slide 1 text

Advanced Routing Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

Slide 2

Slide 2 text

Routen sind der Dreh- und Angelpunkt Ihrer Angular-Anwendung!

Slide 3

Slide 3 text

Inhalt • Basics: Kurze Wiederholung • Hierarchisches Routing • Aux Routes • Guards • Resolver • Router Events • Lazy Loading und Preloading Page ▪ 3

Slide 4

Slide 4 text

Über mich • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator for Angular Page ▪ 4 Manfred Steyer Remote or In-House http://www.softwarearchitekt.at/workshops

Slide 5

Slide 5 text

Routing in Angular Page ▪ 5 Logo + Menü Menü 2 Fußzeile SPA Platzhalter

Slide 6

Slide 6 text

Routing in Angular Page ▪ 6 Logo + Menü Menü 2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier

Slide 7

Slide 7 text

Konfiguration Page ▪ 12 const APP_ROUTES: Routes = [ { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]

Slide 8

Slide 8 text

Konfiguration Page ▪ 15 // app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, RouterModule.forRoot(APP_ROUTES); ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild

Slide 9

Slide 9 text

View von AppComponent Page ▪ 18 Home Flug suchen

Slide 10

Slide 10 text

DEMO Page ▪ 25

Slide 11

Slide 11 text

Hierarchisches Routing Page ▪ 26

Slide 12

Slide 12 text

Hierarchische Views Page ▪ 27 Logo + Menü Menü 2 Fußzeile SPA Platzhalter 1

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Hierarchische Views Page ▪ 30 Logo + Menü Menü 2 Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier

Slide 16

Slide 16 text

Konfiguration Page ▪ 31 const APP_ROUTES: Routes = [ { path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];

Slide 17

Slide 17 text

DEMO Page ▪ 32 App Home Flug buchen Flug suchen Flug editieren Passagier suchen Ihre Buchungen

Slide 18

Slide 18 text

Aux-Routes Page ▪ 35

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche • Commander-Style Page ▪ 41

Slide 25

Slide 25 text

Platzhalter definieren Page ▪ 42

Standard-Name: primary

Slide 26

Slide 26 text

Konfiguration Page ▪ 43 export const ROUTE_CONFIG: Routes = [ { path: 'home', component: HomeComponent }, { path: 'info', component: InfoComponent, outlet: 'aux' }, { path: 'dashboard', component: DashboardComponent, outlet: 'aux' } ]

Slide 27

Slide 27 text

Aux-Routes routen Page ▪ 44 Activate Info Deactivate Info

Slide 28

Slide 28 text

Mehrere Outlets gleichzeitig bestücken … … …

Slide 29

Slide 29 text

Programmatisch routen Page ▪ 46 export class AppComponent { constructor(private router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }

Slide 30

Slide 30 text

DEMO Page ▪ 47

Slide 31

Slide 31 text

Guards Page ▪ 48

Slide 32

Slide 32 text

Was sind Guards? • Services • Können Aktivierung und Deaktivierung von Routen verhindern Page ▪ 49

Slide 33

Slide 33 text

Guards Rückgabewert: boolean | Observable | Promise CanActivate canActivate CanActivateChild canActivateChild CanLoad canLoad CanDeactivate canDeactivate

Slide 34

Slide 34 text

Guards in der Konfiguration Page ▪ 52 const APP_ROUTES: Routes = [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ]

Slide 35

Slide 35 text

Provider für Guards Page ▪ 55 // app.module.ts @NgModule({ providers: [ FlugEditGuard, AuthGuard ], […] }) export class AppModule { }

Slide 36

Slide 36 text

DEMO Page ▪ 56

Slide 37

Slide 37 text

Resolver

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Resolver @Injectable() export class FlightResolver implements Resolve { constructor(private flightService: FlightService) { } resolve(route, state): Observable | Promise | Flight { return […] } }

Slide 40

Slide 40 text

Resolver registrieren const FLIGHT_BOOKING_ROUTES: Routes = [ […] { path: 'flight-edit/:id', component: FlightEditComponent, resolve: { flight: FlightResolver } } ];

Slide 41

Slide 41 text

Daten entgegennehmen @Component({ … }) export class FlightEditComponent { flight: Flight; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.data.subscribe( data => { this.flight = data['flight']; } ); } }

Slide 42

Slide 42 text

DEMO

Slide 43

Slide 43 text

Lazy Loading Page ▪ 64

Slide 44

Slide 44 text

Warum Lazy Loading? • Module erst bei Bedarf nachladen • Verbesserung der Start-Performance Page ▪ 65

Slide 45

Slide 45 text

Root Module mit Lazy Loading Page ▪ 66 const APP_ROUTE_CONFIG: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: '[…]flight-booking.module#FlightBookingModule' } ];

Slide 46

Slide 46 text

Root Module mit Lazy Loading Page ▪ 67 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); } ];

Slide 47

Slide 47 text

Routen für Feature Module Page ▪ 68 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] }

Slide 48

Slide 48 text

Routen für Feature Module Page ▪ 69 const FLUG_ROUTES = [ { path: 'subroute', component: FlugBuchenComponent, […] }, […] }

Slide 49

Slide 49 text

DEMO Page ▪ 71

Slide 50

Slide 50 text

Preloading Page ▪ 72

Slide 51

Slide 51 text

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 ▪ 73

Slide 52

Slide 52 text

Preloading aktivieren Page ▪ 74 export const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });

Slide 53

Slide 53 text

Zusammenfassung Child Routes Aux Routes Guards Resolver Lazy Loading & Preloading

Slide 54

Slide 54 text

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