Der Angular Router im Detail

Slide 1

Slide 1 text

Der Router in Angular im Detail betrachtet Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

Slide 2

Slide 2 text

Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer

Slide 3

Slide 3 text

Ziel • Den Router kennen lernen • Erweiterte Möglichkeiten kennen lernen

Slide 4

Slide 4 text

Inhalt • Basics zu Routing • Child-Routes • Aux-Routes • Guards • Lazy Loading Page ▪ 4

Slide 5

Slide 5 text

Motivation Der Router ist der Dreh- und Angelpunkt vieler SPA

Slide 6

Slide 6 text

Basics Page ▪ 6

Slide 7

Slide 7 text

Warum Routing? • SPAs bestehen aus einer Seite • Seiten simulieren  Routen • Url sollte auf Route hinweisen • Bookmarks • Back-Button • Router unterstützen hierbei Page ▪ 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

View von AppComponent Page ▪ 14 Home Flug suchen

Slide 13

Slide 13 text

Parameter • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page ▪ 17

Slide 14

Slide 14 text

Parameter Page ▪ 18 const APP_ROUTES: Routes = [ […] { path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }

Slide 15

Slide 15 text

Parameter auslesen Page ▪ 19 export class FlugEditComponent { public id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }

Slide 16

Slide 16 text

Links auf Routen mit Parameter Page ▪ 20 Edit

Slide 17

Slide 17 text

DEMO

Slide 18

Slide 18 text

Hierarchisches Routing Page ▪ 22

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

DEMO Page ▪ 28 App Home Flug buchen Flug suchen Flug editieren Passagier suchen

Slide 25

Slide 25 text

Aux-Routes Page ▪ 29

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Platzhalter definieren Page ▪ 36

Standard-Name: primary

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Aux-Routes routen Page ▪ 38 Activate Info Deactivate Info

Slide 35

Slide 35 text

DEMO Page ▪ 40

Slide 36

Slide 36 text

Guards Page ▪ 41

Slide 37

Slide 37 text

Was sind Guards? • Services • Werden beim Aktivieren bzw. Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 42

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Provider für Guards Page ▪ 46 export const ROUTER_PROVIDERS = [ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ];

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

DEMO Page ▪ 48

Slide 43

Slide 43 text

Lazy Loading

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Routen für Feature Module Page ▪ 57 const FLUG_ROUTES = [ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);

Slide 46

Slide 46 text

DEMO

Slide 47

Slide 47 text

Preloading Page ▪ 60

Slide 48

Slide 48 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 ▪ 61

Slide 49

Slide 49 text

Preloading aktivieren Page ▪ 62 RouterModule.forRoot(ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });

Slide 50

Slide 50 text

Lazy Loading und Shared Services Page ▪ 63

Slide 51

Slide 51 text

Lazy Loading und Shared Modules Page ▪ 64 AppModule FlugModule SharedModule includes includes (lazy) includes

Slide 52

Slide 52 text

Lazy Loading und Shared Modules Page ▪ 65 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService

Slide 53

Slide 53 text

Lazy Loading und Shared Modules Page ▪ 66 AppModule FlugModule SharedModule includes includes (lazy) includes AuthService AuthService

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

DEMO

Slide 56

Slide 56 text

Lösung (für Libraries) Page ▪ 69 AppModule FlugModule AuthModule includes (lazy) CoreModule

Slide 57

Slide 57 text

Lösung (für Libraries) Page ▪ 70 AppModule FlugModule AuthModule includes (lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell

Slide 58

Slide 58 text

Zusammenfassung Platzhalter Child Routes Aux Routes Guards

Slide 59

Slide 59 text

Kontakt [mail] [email protected] [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer