Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Advanced Routing @AngularDays2021
Search
Manfred Steyer
PRO
October 06, 2021
Programming
0
400
Advanced Routing @AngularDays2021
Manfred Steyer
PRO
October 06, 2021
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Micro Frontends with Web Standards
manfredsteyer
PRO
0
190
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
160
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
140
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
92
NGRX Signal Store
manfredsteyer
PRO
0
180
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
89
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
470
Angular Architectures with Signals
manfredsteyer
PRO
2
600
Other Decks in Programming
See All in Programming
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
310
オープンなデータ・ソフトウェアを活用した開発
404background
0
160
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
110
GitHub Copilot Tips and Tricks
yuichielectric
2
260
Honoとhtmx
yusukebe
6
1.1k
一休.comレストランのRustバックエンド開発の様子
kymmt90
13
7.9k
品質が高いコードって何?Rev2.1
ickx
1
390
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
7
5.9k
私がエッジを使う理由
chimame
9
3.6k
CSC308B Lecture 12
javiergs
PRO
0
110
document.write再考
brn
5
2k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
160
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
How GitHub (no longer) Works
holman
301
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
RailsConf 2023
tenderlove
0
500
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Adopting Sorbet at Scale
ufuk
66
8.5k
How to name files
jennybc
62
91k
Git: the NoSQL Database
bkeepers
PRO
421
63k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Faster Mobile Websites
deanohume
296
30k
Unsuck your backbone
ammeep
660
56k
Transcript
Advanced Routing Manfred Steyer ANGULARarchitects.io ManfredSteyer
Routen sind der Dreh- und Angelpunkt Ihrer Angular-Anwendung!
Inhalt • Basics: Kurze Wiederholung • Hierarchisches Routing • Aux
Routes • Guards • Resolver • Router Events • Lazy Loading und Preloading Page ▪ 3
Ü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
Routing in Angular Page ▪ 5 Logo + Menü Menü
2 Fußzeile SPA Platzhalter
Routing in Angular Page ▪ 6 Logo + Menü Menü
2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier
Konfiguration Page ▪ 12 const APP_ROUTES: Routes = [ {
path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
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
View von AppComponent Page ▪ 18 <a routerLink="/home">Home</a> <a routerLink="/flug-suchen">Flug
suchen</a> <div> <router-outlet></router-outlet> </div>
DEMO Page ▪ 25
Hierarchisches Routing Page ▪ 26
Hierarchische Views Page ▪ 27 Logo + Menü Menü 2
Fußzeile SPA Platzhalter 1
Hierarchische Views Page ▪ 28 Logo + Menü Menü 2
Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
Hierarchische Views Page ▪ 29 Logo + Menü Menü 2
Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen
Hierarchische Views Page ▪ 30 Logo + Menü Menü 2
Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
Konfiguration Page ▪ 31 const APP_ROUTES: Routes = [ {
path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
DEMO Page ▪ 32 App Home Flug buchen Flug suchen
Flug editieren Passagier suchen Ihre Buchungen
Aux-Routes Page ▪ 35
Aux-Routes Page ▪ 36 Logo + Menu Menu 2 Footer
SPA Placeholder Named Placeholder
Aux-Routes Page ▪ 37 Logo + Menu Menu 2 Footer
SPA Flight- Component Named Placeholder /FlightApp/flights
Aux-Routes Page ▪ 38 Logo + Menu Menu 2 Footer
SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
Aux-Routes Page ▪ 39 Logo + Menu Menu 2 Footer
SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
Aux-Routes Page ▪ 40 Logo + Menu Menu 2 Footer
SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/17
Use Cases • Modale Dialoge • “Applets” und teilautonome Bereiche
• Commander-Style Page ▪ 41
Platzhalter definieren Page ▪ 42 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name:
primary
Konfiguration Page ▪ 43 export const ROUTE_CONFIG: Routes = [
{ path: 'home', component: HomeComponent }, { path: 'info', component: InfoComponent, outlet: 'aux' }, { path: 'dashboard', component: DashboardComponent, outlet: 'aux' } ]
Aux-Routes routen Page ▪ 44 <a [routerLink]="[{outlets: { aux: 'info'
}}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
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>
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 }}]); } }
DEMO Page ▪ 47
Guards Page ▪ 48
Was sind Guards? • Services • Können Aktivierung und Deaktivierung
von Routen verhindern Page ▪ 49
Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild
canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
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] }, […] ] ]
Provider für Guards Page ▪ 55 // app.module.ts @NgModule({ providers:
[ FlugEditGuard, AuthGuard ], […] }) export class AppModule { }
DEMO Page ▪ 56
Resolver
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
Resolver @Injectable() export class FlightResolver implements Resolve<Flight> { constructor(private flightService:
FlightService) { } resolve(route, state): Observable<Flight> | Promise<Flight> | Flight { return […] } }
Resolver registrieren const FLIGHT_BOOKING_ROUTES: Routes = [ […] { path:
'flight-edit/:id', component: FlightEditComponent, resolve: { flight: FlightResolver } } ];
Daten entgegennehmen @Component({ … }) export class FlightEditComponent { flight:
Flight; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.data.subscribe( data => { this.flight = data['flight']; } ); } }
DEMO
Lazy Loading Page ▪ 64
Warum Lazy Loading? • Module erst bei Bedarf nachladen •
Verbesserung der Start-Performance Page ▪ 65
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' } ];
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); } ];
Routen für Feature Module Page ▪ 68 const FLUG_ROUTES =
[ { path: '', component: FlugBuchenComponent, […] }, […] }
Routen für Feature Module Page ▪ 69 const FLUG_ROUTES =
[ { path: 'subroute', component: FlugBuchenComponent, […] }, […] }
DEMO Page ▪ 71
Preloading Page ▪ 72
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
Preloading aktivieren Page ▪ 74 export const AppRoutesModule = RouterModule.forRoot(
ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
Zusammenfassung Child Routes Aux Routes Guards Resolver Lazy Loading &
Preloading
Kontakt and Downloads [mail]
[email protected]
[web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d
Slides & Examples Public and In-House http://www.softwarearchitekt.at/workshops