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
Advanced Routing @AngularDays 2019 in Munich
Search
Manfred Steyer
PRO
March 19, 2019
Programming
0
410
Advanced Routing @AngularDays 2019 in Munich
Manfred Steyer
PRO
March 19, 2019
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
Git Lint
bkuhlmann
4
750
新宿ダンジョンを可視化してみた
satoshi7190
2
260
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
340
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
240
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
PHPはいつから死んでいるかの調査
chiroruxx
1
400
ONE WEDGE_company_guide
1wedge_one
0
480
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
Featured
See All Featured
Writing Fast Ruby
sferik
621
60k
How GitHub (no longer) Works
holman
304
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
4 Signs Your Business is Dying
shpigford
175
21k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Infographics Made Easy
chrislema
238
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Web Components: a chance to create the future
zenorocha
305
41k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Transcript
Advanced Routing Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
None
Routen sind die tragenden Wände Ihrer Angular-Anwendung!
Inhalt • Basics: Kurze Wiederholung • Hierarchisches Routing • Aux
Routes • Guards • Resolver • Lazy Loading und Preloading Page ▪ 4
Über mich • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and
Consultancy • Google Developer Expert (GDE) • Trusted Collaborator for Angular Page ▪ 5 Manfred Steyer Public in several cities and In-House http://www.softwarearchitekt.at/workshops
Routing in Angular Page ▪ 8 Logo + Menü Menü
2 Fußzeile SPA Platzhalter
Routing in Angular Page ▪ 9 Logo + Menü Menü
2 Fußzeile SPA Passagier- Komponente /FlugDemo/passagier
Konfiguration Page ▪ 15 const APP_ROUTES: Routes = [ {
path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
Konfiguration Page ▪ 18 export const AppRoutesModule = RouterModule.forRoot(APP_ROUTES); //
app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, AppRoutesModule ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild
View von AppComponent Page ▪ 20 <a [routerLink]="'/home'">Home</a> <a [routerLink]="'/flug-suchen'">Flug
suchen</a> <div> <router-outlet></router-outlet> </div>
DEMO Page ▪ 28
Hierarchisches Routing Page ▪ 29
Hierarchische Views Page ▪ 30 Logo + Menü Menü 2
Fußzeile SPA Platzhalter 1
Hierarchische Views Page ▪ 31 Logo + Menü Menü 2
Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
Hierarchische Views Page ▪ 32 Logo + Menü Menü 2
Fußzeile SPA Optionen Platzhalter FlugBuchen-Komponente /FlugDemo/flugbuchen
Hierarchische Views Page ▪ 33 Logo + Menü Menü 2
Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
Konfiguration Page ▪ 34 const APP_ROUTES: Routes = [ {
path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
DEMO Page ▪ 35 App Home Flug buchen Flug suchen
Flug editieren Passagier suchen Ihre Buchungen
Aux-Routes Page ▪ 38
Aux-Routes Page ▪ 39 Logo + Menu Menu 2 Footer
SPA Placeholder Named Placeholder
Aux-Routes Page ▪ 40 Logo + Menu Menu 2 Footer
SPA Flight- Component Named Placeholder /FlightApp/flights
Aux-Routes Page ▪ 41 Logo + Menu Menu 2 Footer
SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
Aux-Routes Page ▪ 42 Logo + Menu Menu 2 Footer
SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
Aux-Routes Page ▪ 43 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 ▪ 44
Platzhalter definieren Page ▪ 45 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name:
primary
Konfiguration Page ▪ 46 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 ▪ 47 <a [routerLink]="[{outlets: { aux: 'info'
}}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
Mehrere Outlets gleichzeitig bestücken <a [routerLink]="[{outlets: { aux: 'basket', primary:
'flight-booking/flight-search' }}]"> … </a> <a [routerLink]="[{outlets: { aux: 'basket', primary: ['flight-booking', 'flight-search'] }}]"> … </a> <a [routerLink]="[{outlets: { aux: 'basket', primary: ['flight-booking', 'flight-edit', 17] }}]"> … </a>
Programmatisch routen Page ▪ 49 export class AppComponent { constructor(private
router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }
DEMO Page ▪ 50
Guards Page ▪ 51
Was sind Guards? • Services • Werden beim Aktivieren bzw.
Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 52
Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild
canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
Guards in der Konfiguration Page ▪ 55 const APP_ROUTES: Routes
= [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ]
Provider für Guards Page ▪ 58 // app.module.ts @NgModule({ providers:
[ FlugEditGuard, AuthGuard ], […] }) export class AppModule { }
DEMO Page ▪ 59
Resolver
Was sind Resolver? • Services • Werden beim Routenwechsel aktiv
• Verzögern Aktivierung der neuen Route • Laden benötigte Daten • Zwischenzeitlich kann z. B. Loading Indikator angezeigt werden
Resolver @Injectable() export class FlightResolver implements Resolve<Flight> { constructor(private flightService:
FlightService) { } resolve(route, state): Observable<Flight> | Promise<Flight> | Flight { return […] } }
Resolver registrieren const FLIGHT_BOOKING_ROUTES: Routes = [ […] { path:
'flight-edit/:id', component: FlightEditComponent, resolve: { flight: FlightResolver } } ];
Daten entgegennehmen @Component({ … }) export class FlightEditComponent { flight:
Flight; constructor(private route: ActivatedRoute) { } ngOnInit() { this.route.data.subscribe( data => { this.flight = data['flight']; } ); } }
DEMO
Lazy Loading Page ▪ 67
Warum Lazy Loading? • Module erst bei Bedarf nachladen •
Verbesserung der Start-Performance Page ▪ 68
Root Module mit Lazy Loading Page ▪ 69 const APP_ROUTE_CONFIG:
Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flights', loadChildren: '[…]flight-booking.module#FlightBookingModule' } ];
Routen für Feature Module Page ▪ 70 const FLUG_ROUTES =
[ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
Konfiguration von Webpack • @ngtools/webpack loader Page ▪ 71
DEMO Page ▪ 72
Preloading Page ▪ 73
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 ▪ 74
Preloading aktivieren Page ▪ 75 export const AppRoutesModule = RouterModule.forRoot(
ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
Zusammenfassung Child Routes Aux Routes Guards Resolver Lazy Loading &
Preloading
Kontakt and Downloads [mail]
[email protected]
[web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d
Slides & Examples Public and In-House http://www.softwarearchitekt.at/workshops