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 Berlin/Online
Search
Manfred Steyer
PRO
October 07, 2020
Programming
1
560
Advanced Routing @Angular Days 2020 Berlin/Online
Manfred Steyer
PRO
October 07, 2020
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
11
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
7
Modern Angular with Signals and Signal StoreNew Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
3
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
470
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
24
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
440
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
380
Other Decks in Programming
See All in Programming
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
470
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
GoとPHPのインターフェイスの違い
shimabox
2
210
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
970
Jakarta EE meets AI
ivargrimstad
0
350
PEPCは何を変えようとしていたのか
ken7253
2
230
はじめての Go * WASM *OCR
sgash708
1
100
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
Rails アプリ地図考 Flush Cut
makicamel
1
130
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
GraphQLとの向き合い方2022年版
quramy
44
14k
How GitHub (no longer) Works
holman
314
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Statistics for Hackers
jakevdp
797
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Making Projects Easy
brettharned
116
6k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Typedesign – Prime Four
hannesfritz
40
2.5k
Gamification - CAS2011
davidbonilla
80
5.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
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 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