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
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
Platformに“ちょうどいい”責務ってどこ? 関心の熱さにあわせて考える、責務分担のプラクティス
estie
1
140
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
旅行プランAIエージェント開発の裏側
ippo012
2
930
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
Cache Me If You Can
ryunen344
2
4k
Deep Dive into Kotlin Flow
jmatsu
1
370
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Writing Fast Ruby
sferik
628
62k
Agile that works and the tools we love
rasmusluckow
330
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Navigating Team Friction
lara
189
15k
A better future with KSS
kneath
239
17k
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