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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
320
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
620
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
480
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
220
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
220
Other Decks in Programming
See All in Programming
Testing Trophyは叫ばない
toms74209200
0
690
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.2k
AI時代のUIはどこへ行く?
yusukebe
14
7.9k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
700
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
Improving my own Ruby thereafter
sisshiki1969
1
150
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.5k
TanStack DB ~状態管理の新しい考え方~
bmthd
2
480
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
820
Namespace and Its Future
tagomoris
6
690
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Designing for Performance
lara
610
69k
Writing Fast Ruby
sferik
628
62k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
GitHub's CSS Performance
jonrohan
1032
460k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Optimizing for Happiness
mojombo
379
70k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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