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
Routing in Angular
Search
Manfred Steyer
PRO
June 28, 2017
Programming
1
99
Routing in Angular
Slides from talk at DWX 2017 in Nuremberg
Manfred Steyer
PRO
June 28, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
6
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
300
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
190
JavaScript as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
92
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
100
Other Decks in Programming
See All in Programming
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
0
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
4
6.1k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
生成AI時代のコンポーネントライブラリの作り方
touyou
1
120
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
4
600
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
5つのアンチパターンから学ぶLT設計
narihara
1
160
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
RailsConf 2023
tenderlove
30
1.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Unsuck your backbone
ammeep
671
58k
What's in a price? How to price your products and services
michaelherold
246
12k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
Routing in Angular Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Focus:
Angular • Workshops & Consulting • 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
Routing unter Angular Page ▪ 8 Logo + Menü Menü
2 Fußzeile SPA Platzhalter
Routing unter Angular Page ▪ 9 Logo + Menü Menü
2 Fußzeile SPA Passagier- Komponente /FlugDemo#passagier
Routing unter 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 export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG); //
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 ▪ 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>
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 FlightBookingModule AppModule
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>
Programmatisch routen Page ▪ 39 export class AppComponent { constructor(private
router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }
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);
Konfiguration von Webpack • angular2-router-loader Page ▪ 58
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 export const AppRoutesModule = 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