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
Reactivity, Reimagined: Angular Signals at Every Layer
manfredsteyer
PRO
0
13
Angular Architecture Workshop @AngularDays in Berlin 2025
manfredsteyer
PRO
0
16
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
96
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
100
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
210
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
140
Your Architecture as a Crime SceneForensic Analysis @BASTA! 2025 in Mainz, Germany
manfredsteyer
PRO
0
78
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
47
Other Decks in Programming
See All in Programming
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
240
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
Go言語はstack overflowの夢を見るか?
logica0419
0
520
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
560
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
XP, Testing and ninja testing ZOZ5
m_seki
3
790
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
AI Agent 時代的開發者生存指南
eddie
4
2.1k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
What's new in Spring Modulith?
olivergierke
1
160
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Side Projects
sachag
455
43k
Scaling GitHub
holman
463
140k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Pragmatic Product Professional
lauravandoore
36
7k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Docker and Python
trallard
46
3.6k
Faster Mobile Websites
deanohume
310
31k
Writing Fast Ruby
sferik
629
62k
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