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 into the Sunset with Angular
Search
Manfred Steyer
PRO
October 24, 2017
Programming
1
240
Routing into the Sunset with Angular
Talk from International JavaScript Conference in Munich, October 2017
Manfred Steyer
PRO
October 24, 2017
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
140
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
manfredsteyer
PRO
0
72
Your Architecture as a Crime Scene:Forensic Analysis
manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
290
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
89
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
97
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
72
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
440
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
290
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
320
CursorはMCPを使った方が良いぞ
taigakono
1
190
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
PicoRuby on Rails
makicamel
2
110
XSLTで作るBrainfuck処理系
makki_d
0
210
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
570
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Practical Orchestrator
shlominoach
188
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Building an army of robots
kneath
306
45k
Documentation Writing (for coders)
carmenintech
72
4.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Writing Fast Ruby
sferik
628
62k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
Routing into the Sunset with Angular Manfred Steyer ManfredSteyer
About me… • Manfred Steyer • SOFTWAREarchitekt.at • Trainer &
Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
Contents • Basics • Child Routes • Aux Routes •
Guards • Lazy Loading
Angular Router Page ▪ 4
Routing in Angular Page ▪ 5 Logo + Menu Menu
2 Footer SPA Placeholder
Routing in Angular Page ▪ 6 Logo + Menu Menu
2 Footer SPA Passenger- Component /FlightApp/passenger
Configuration Page ▪ 7 const APP_ROUTES: Routes = [ {
path: 'home', component: HomeComponent }, { path: 'flight-search', component: FlightSearchComponent }, { path: '**', redirectTo: 'home' } ]
Configuration Page ▪ 8 // app.module.ts @NgModule({ imports: [ BrowserModule,
HttpModule, FormsModule, RouterModule.forRoot(ROUTE_CONFIG) ], […] }) export class AppModule { } For Root-Module For Feature-Module: forChild
AppComponent Page ▪ 9 <a routerLink="/home">Home</a> <a routerLink="/flight-search">Flight Search</a> <div>
<router-outlet></router-outlet> </div>
Parameters • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page
▪ 10
Parameters Page ▪ 11 const APP_ROUTES: Routes = [ […]
{ path: 'flight-search', component: FlightSearchComponent }, { path: 'flight-edit/:id', component: FlightEditComponent } }
Reading Parameters Page ▪ 12 export class FlightEditComponent { public
id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
Links for Routen with Parameters Page ▪ 13 <a [routerLink]="['/flight-edit',
flug.id, {showDetails: true}]">Edit</a>
Hierarchical Routing Page ▪ 14
Hierarchical Routing Page ▪ 15 Logo + Menu Menu 2
Footer SPA Placeholder 1
Hierarchical Routing Page ▪ 16 Logo + Menu Menu 2
Footer SPA /FlightDemo/flight-booking FlightBookingComponent
Hierarchical Routing Page ▪ 17 Logo + Menu Menu 2
Footer SPA Options Placeholder FlightBookingComponent /FlightDemo/flight-booking
Hierarchical Routing Page ▪ 18 Logo + Menu Menu 2
Footer SPA Optionen Passenger Component FlightBookingComponent /FlightDemo/flight-booking/passenger
Configuration Page ▪ 19 const APP_ROUTES: Routes = [ {
path: '', component: HomeComponent }, { path: 'flight-booking', component: FlightBookingComponent, children: [ { path: 'flight-search', component: FlightSearchComponent }, […] ] } ];
DEMO Page ▪ 20 App Home Flight Booking Flight Search
Flight Edit Passenger Search Other Stuff
Aux Routes
Aux-Routes Page ▪ 22 Logo + Menu Menu 2 Footer
SPA Placeholder Named Placeholder
Aux-Routes Page ▪ 23 Logo + Menu Menu 2 Footer
SPA Flight- Component Named Placeholder /FlightApp/flights
Aux-Routes Page ▪ 24 Logo + Menu Menu 2 Footer
SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
Aux-Routes Page ▪ 25 Logo + Menu Menu 2 Footer
SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
Aux-Routes Page ▪ 26 Logo + Menu Menu 2 Footer
SPA Flight-Edit- Component Modal-Component /FlightApp/flights(aux:info/modal)/edit/17
Use Cases • Partly autonomous parts of an application •
„Norton Commander Style“ • (CSS-based) Popups and Modals
DEMO Page ▪ 28
Guards Page ▪ 29
What are Guard? • Services • Can prevent the Activation
or Deactivation of a Route Page ▪ 30
Guards Result: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild
canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
Guards in der Konfiguration Page ▪ 33 const APP_ROUTES: Routes
= [ { path: '/flight-booking', component: FlightBookingComponent, canActivate: [AuthGuard], children: [ { path: 'flight-edit/:id', component: FlightEditComponent, canDeactivate: [FlightEditGuard] }, […] ] ] Token
Provider für Guards Page ▪ 35 // app.module.ts @NgModule({ providers:
[ FlightEditGuard, AuthGuard ], […] }) export class AppModule { }
DEMO Page ▪ 36
Lazy Loading
Root Module with Lazy Loading Page ▪ 45 const APP_ROUTE_CONFIG:
Routes = [ { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: './[…]flight-booking.module#FlightBookingModule' } ];
Routes for Feature Module Page ▪ 46 const FLIGHT_ROUTES =
[ { path: '/bookings', component: FlightBookingComponent, […] }, […] } Url: /flights/bookings Triggers Lazy Loading
Preloading
Idea • Modules that might be needed later are loaded
after (!) the start of the application • When the module is actually needed, it is available immediately Page ▪ 49
Activating Preloading Page ▪ 50 const AppRoutesModule = RouterModule.forRoot( ROUTE_CONFIG,
{ preloadingStrategy: PreloadAllModules });
Lazy Loading and Shared Modules Page ▪ 51
DEMO Page ▪ 52
Lazy Loading and Shared Modules Page ▪ 53 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService
Lazy Loading and Shared Modules Page ▪ 54 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lazy Loading and Shared Modules Page ▪ 55 AppModule FlightModule
SharedModule includes includes (lazy) includes AuthService AuthService
Solution Page ▪ 56 AppModule FlightModule SharedModule includes (lazy) includes
CoreModule includes includes Only import CoreModule into AppModule! Global Providers like AuthService & Shell
DEMO
Huge CoreModule? Page ▪ 58 AppModule FlightModule SharedModule includes (lazy)
includes CoreModule includes includes
Solution Page ▪ 59 AppModule FlightModule AuthModule includes (lazy) CoreModule
Solution Page ▪ 60 AppModule FlightModule AuthModule includes (lazy) includes
(with Services) CoreModule includes includes (without Services)
Auth Module Page ▪ 61 @NgModule({ […], providers: [] })
export class AuthModule { }
Auth Module Page ▪ 62 @NgModule({ […], providers: [] })
export class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
DEMO Page ▪ 63
Conclusion Child Routes Aux Routes Guards Lazy Loading
Downloads and Contact [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer