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
130
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
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
290
Micro Frontends with Web Standards
manfredsteyer
PRO
0
220
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
190
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
150
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
95
NGRX Signal Store
manfredsteyer
PRO
0
200
signals-arc.pdf
manfredsteyer
PRO
0
220
Camel and Eye of a Needle: Integration of SPA-based Micro Frontends
manfredsteyer
PRO
0
91
Micro Frontends with Modern Angular
manfredsteyer
PRO
1
480
Other Decks in Programming
See All in Programming
Parallel Socket Communication in Swift
s_shimotori
0
260
複雑なドメインを扱うプロダクトの探索フェーズではいつどのようにテストをするのか / How to testing during exploratory phase
boykush
2
150
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3.5k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.6k
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.9k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
How to train your dragon (web standard)
notwaldorf
71
5.1k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Practical Orchestrator
shlominoach
180
9.7k
Web development in the modern age
philhawksworth
201
10k
For a Future-Friendly Web
brad_frost
170
8.9k
Automating Front-end Workflow
addyosmani
1353
200k
Building Your Own Lightsaber
phodgson
97
5.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
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