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 @Angular Days 2020 Munich
Search
Manfred Steyer
PRO
September 03, 2020
Programming
2
570
Advanced Routing @Angular Days 2020 Munich
Manfred Steyer
PRO
September 03, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
300
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
610
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
480
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
160
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
220
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
350
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
240
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
350
Updates on MLS on Ruby (and maybe more)
sylph01
1
170
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
3
1.1k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
100
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
370
rage against annotate_predecessor
junk0612
0
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
230
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.2k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Speed Design
sergeychernyshev
32
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
A Tale of Four Properties
chriscoyier
160
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
The Pragmatic Product Professional
lauravandoore
36
6.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
Advanced Routing Manfred Steyer SOFTWAREarchitekt.at 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 Public in several cities and 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 export const AppRoutesModule = RouterModule.forRoot(APP_ROUTES); //
app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, AppRoutesModule ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild
View von AppComponent Page ▪ 17 <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, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
DEMO Page ▪ 70
Preloading Page ▪ 71
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 ▪ 72
Preloading aktivieren Page ▪ 73 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