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
230
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
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
34
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
29
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
84
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
80
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
PHPはいつから死んでいるかの調査
chiroruxx
1
400
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
180
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
2 週間で Twitter Bot を作ってみた
contour_gara
0
390
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Git Rebase
bkuhlmann
11
1.6k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
340
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
260
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Designing for humans not robots
tammielis
248
25k
Producing Creativity
orderedlist
PRO
337
39k
Optimizing for Happiness
mojombo
370
69k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Product Roadmaps are Hard
iamctodd
44
9.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
A designer walks into a library…
pauljervisheath
200
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
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