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
Der Angular Router im Detail
Search
Manfred Steyer
PRO
September 27, 2017
Programming
0
170
Der Angular Router im Detail
Session from BASTA! 2017, Mainz (Germany)
Manfred Steyer
PRO
September 27, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Your Architecture as a Crime SceneForensic Analysis @EntwicklerSummit Berlin 2025
manfredsteyer
PRO
0
1
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
350
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
630
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
500
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
230
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
360
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
Other Decks in Programming
See All in Programming
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
私の後悔をAWS DMSで解決した話
hiramax
4
210
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
Design Foundational Data Engineering Observability
sucitw
3
210
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
GitHub's CSS Performance
jonrohan
1032
460k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Context Engineering - Making Every Token Count
addyosmani
3
62
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Navigating Team Friction
lara
189
15k
Building Adaptive Systems
keathley
43
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Transcript
Der Router in Angular im Detail betrachtet Manfred Steyer SOFTWAREarchitekt.at
ManfredSteyer
Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
Ziel • Den Router kennen lernen • Erweiterte Möglichkeiten kennen
lernen
Inhalt • Basics zu Routing • Child-Routes • Aux-Routes •
Guards • Lazy Loading Page ▪ 4
Motivation Der Router ist der Dreh- und Angelpunkt vieler SPA
Basics Page ▪ 6
Warum Routing? • SPAs bestehen aus einer Seite • Seiten
simulieren Routen • Url sollte auf Route hinweisen • Bookmarks • Back-Button • Router unterstützen hierbei Page ▪ 7
Routing in Angular Page ▪ 8 Logo + Menü Menü
2 Fußzeile SPA Platzhalter
Routing in Angular Page ▪ 10 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 }, { path: '**', redirectTo: 'home' } ]
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
View von AppComponent Page ▪ 14 <a routerLink="/">Home</a> <a routerLink="/flug-suchen">Flug
suchen</a> <div> <router-outlet></router-outlet> </div>
Parameter • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page
▪ 17
Parameter Page ▪ 18 const APP_ROUTES: Routes = [ […]
{ path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }
Parameter auslesen Page ▪ 19 export class FlugEditComponent { public
id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
Links auf Routen mit Parameter Page ▪ 20 <a [routerLink]="['/flug-edit',
flug.id]">Edit</a>
DEMO
Hierarchisches Routing Page ▪ 22
Hierarchische Views Page ▪ 23 Logo + Menü Menü 2
Fußzeile SPA Platzhalter 1
Hierarchische Views Page ▪ 24 Logo + Menü Menü 2
Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
Hierarchische Views Page ▪ 25 Logo + Menü Menü 2
Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen
Hierarchische Views Page ▪ 26 Logo + Menü Menü 2
Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
Konfiguration Page ▪ 27 const FLIGHT_ROUTES: Routes = [ […]
{ path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
DEMO Page ▪ 28 App Home Flug buchen Flug suchen
Flug editieren Passagier suchen
Aux-Routes Page ▪ 29
Aux-Routes Page ▪ 30 Logo + Menu Menu 2 Footer
SPA Placeholder Named Placeholder
Aux-Routes Page ▪ 31 Logo + Menu Menu 2 Footer
SPA Flight- Component Named Placeholder /FlightApp/flights
Aux-Routes Page ▪ 32 Logo + Menu Menu 2 Footer
SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
Aux-Routes Page ▪ 33 Logo + Menu Menu 2 Footer
SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
Aux-Routes Page ▪ 34 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 ▪ 35
Platzhalter definieren Page ▪ 36 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name:
primary
Konfiguration Page ▪ 37 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 ▪ 38 <a [routerLink]="[{outlets: { aux: 'info'
}}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
DEMO Page ▪ 40
Guards Page ▪ 41
Was sind Guards? • Services • Werden beim Aktivieren bzw.
Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 42
Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild
canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
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
Provider für Guards Page ▪ 46 export const ROUTER_PROVIDERS =
[ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ];
Provider für Guards Page ▪ 47 export const ROUTER_PROVIDERS =
[ FlugEditGuard, AuthGuard ]; // app.module.ts @NgModule({ providers: [ ROUTER_PROVIDERS ], […] }) export class AppModule { }
DEMO Page ▪ 48
Lazy Loading
Root Module mit Lazy Loading Page ▪ 56 const APP_ROUTE_CONFIG:
Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
Routen für Feature Module Page ▪ 57 const FLUG_ROUTES =
[ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
DEMO
Preloading Page ▪ 60
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
Preloading aktivieren Page ▪ 62 RouterModule.forRoot(ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
Lazy Loading und Shared Services Page ▪ 63
Lazy Loading und Shared Modules Page ▪ 64 AppModule FlugModule
SharedModule includes includes (lazy) includes
Lazy Loading und Shared Modules Page ▪ 65 AppModule FlugModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lazy Loading und Shared Modules Page ▪ 66 AppModule FlugModule
SharedModule includes includes (lazy) includes AuthService AuthService
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
DEMO
Lösung (für Libraries) Page ▪ 69 AppModule FlugModule AuthModule includes
(lazy) CoreModule
Lösung (für Libraries) Page ▪ 70 AppModule FlugModule AuthModule includes
(lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell
Zusammenfassung Platzhalter Child Routes Aux Routes Guards
Kontakt [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer