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
Der neue Angular Router im Detail betrachtet
Search
Manfred Steyer
PRO
March 21, 2017
Programming
2
210
Der neue Angular Router im Detail betrachtet
Manfred Steyer
PRO
March 21, 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
39
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
31
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
"config" ってなんだ? / What is "config"?
okashoi
0
240
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
190
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Goのmultiple errorsについて (2024年4月版)
syumai
4
930
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Code Reviews
bkuhlmann
4
890
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Agile that works and the tools we love
rasmusluckow
325
20k
Building an army of robots
kneath
300
41k
Documentation Writing (for coders)
carmenintech
60
3.9k
What the flash - Photography Introduction
edds
64
11k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
GraphQLとの向き合い方2022年版
quramy
32
12k
Producing Creativity
orderedlist
PRO
337
39k
Writing Fast Ruby
sferik
621
60k
Transcript
Der neue Angular Router im Detail betrachtet Manfred Steyer SOFTWAREarchitekt.at
ManfredSteyer ManfredSteyer
Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer
& Consultant • Focus: Angular • Google Developer Expert (GDE) Page ▪ 2 Manfred Steyer
Ziel • Den Router kennen lernen • Erweiterte Möglichkeiten kennen
lernen
Inhalt • Basics zu Routing • Child-Routes • Aux-Routes •
Guards • Lazy Loading • Preloading Page ▪ 4
Motivation Der Router ist der Dreh- und Angelpunkt vieler SPA
Routing Basics Page ▪ 6
Routing unter Angular Page ▪ 7 Logo + Menü Menü
2 Fußzeile SPA Platzhalter
Routing unter Angular Page ▪ 8 Logo + Menü Menü
2 Fußzeile SPA Passagier- Komponente /FlugDemo#passagier
Routen via Hash-Fragment • /FlugDemo#passagier • Hash-Fragment wird nie zum
Server gesendet Page ▪ 9
Routen via History API • /FlugDemo/passagier • Gesamte Url wird
zum Server gesendet • Server antwortet mit SPA • Server kann erste Ansicht "vorrendern" • Performance, SEO, … • SPA informiert Browser über Grenze zwischen (eigentlicher) Url und Route Page ▪ 10
Parameter • passagier/7 • passagier/7?details=true&page=7 • passagier/7;details=true;page=7 • passagier/7;details=true;page=7/fluege Page
▪ 11
Konfiguration Page ▪ 12 const APP_ROUTES: Routes = [ {
path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
Konfiguration Page ▪ 13 const APP_ROUTES: Routes = [ {
path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'flug-suchen', component: FlugSuchenComponent } ]
Konfiguration Page ▪ 14 const APP_ROUTES: Routes = [ {
path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, […] { path: '**', redirectTo: 'home' } ]
Konfiguration Page ▪ 15 export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG); //
app.module.ts @NgModule({ imports: [ BrowserModule, HttpModule, FormsModule, AppRoutesModule ], […] }) export class AppModule { } Für Root-Module Für Feature-Module: forChild
AppComponent Page ▪ 16 @Component({ selector: 'app', templateUrl: './app.html' })
export class App { […] }
View von AppComponent Page ▪ 18 <a routerLink="/">Home</a> <a routerLink="/flug-suchen">Flug
suchen</a> <div> <router-outlet></router-outlet> </div>
Routen mit Parameter Page ▪ 20
Konfiguration Page ▪ 21 const APP_ROUTES: Routes = [ […]
{ path: 'flug-suchen', component: FlugSuchenComponent }, { path: 'flug-edit/:id', component: FlugEditComponent } }
Parameter auslesen Page ▪ 22 export class FlugEditComponent { public
id: string; constructor( private route: ActivatedRoute) { route.params.subscribe( p => { this.id = p['id']; […] } ); } […] }
Links auf Routen mit Parameter Page ▪ 23 <a [routerLink]="['/flug-edit',
flug.id]">Edit</a>
DEMO Page ▪ 24 App Home Search Flight Edit Flight
Search Passenger Your Bookings FlightBookingModule AppModule
Hierarchisches Routing Page ▪ 25
Hierarchische Views Page ▪ 26 Logo + Menü Menü 2
Fußzeile SPA Platzhalter 1
Hierarchische Views Page ▪ 27 Logo + Menü Menü 2
Fußzeile SPA /FlugDemo/flugbuchen FlugBuchen-Komponente
Hierarchische Views Page ▪ 28 Logo + Menü Menü 2
Fußzeile SPA /FlugDemo/flugbuchen Optionen Platzhalter FlugBuchen-Komponente
Hierarchische Views Page ▪ 29 Logo + Menü Menü 2
Fußzeile SPA Optionen Passagier- Komponente FlugBuchen-Komponente /FlugDemo/flugbuchen/passagier
Konfiguration Page ▪ 30 const APP_ROUTES: Routes = [ {
path: '', component: HomeComponent }, { path: 'flug-buchen', component: FlugBuchenComponent, children: [ { path: 'flug-suchen', component: FlugSuchenComponent }, […] ] } ];
DEMO Page ▪ 31 App Home Flight- Booking Search Flight
Edit Flight Search Passenger Your Bookings
Aux-Routes Page ▪ 34
Aux-Routes Page ▪ 35 Logo + Menu Menu 2 Footer
SPA Placeholder Named Placeholder
Aux-Routes Page ▪ 36 Logo + Menu Menu 2 Footer
SPA Flight- Component Named Placeholder /FlightApp/flights
Aux-Routes Page ▪ 37 Logo + Menu Menu 2 Footer
SPA Flight- Component Info-Component /FlightApp/flights(aux:info)
Aux-Routes Page ▪ 38 Logo + Menu Menu 2 Footer
SPA Flight- Component Modal-Component /FlightApp/flights(aux:info/modal)
Aux-Routes Page ▪ 39 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 ▪ 40
Platzhalter definieren Page ▪ 41 <router-outlet></router-outlet> <hr> <router-outlet name="aux"></router-outlet> Standard-Name:
primary
Konfiguration Page ▪ 42 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 ▪ 43 <a [routerLink]="[{outlets: { aux: 'info'
}}]"> Activate Info </a> <a [routerLink]="[{outlets: { aux: null }}]"> Deactivate Info </a>
Programmatisch routen Page ▪ 44 export class AppComponent { constructor(private
router: Router) { } activateInfo() { this.router.navigate([{outlets: { aux: 'info' }}]); } deactivateInfo() { this.router.navigate([{outlets: { aux: null }}]); } }
DEMO Page ▪ 45
Guards Page ▪ 46
Was sind Guards? • Services • Werden beim Aktivieren bzw.
Deaktivieren einer Route aktiv • Können Aktivierung und Deaktivierung verhindern Page ▪ 47
Guards Rückgabewert: boolean | Observable<boolean> | Promise<boolean> CanActivate canActivate CanActivateChild
canActivateChild CanLoad canLoad CanDeactivate<T> canDeactivate
Guards in der Konfiguration Page ▪ 50 const APP_ROUTES: Routes
= [ { path: '/flug-buchen', component: FlugBuchenComponent, canActivate: [AuthGuard], children: [ { path: 'flug-edit/:id', component: FlugEditComponent, canDeactivate: [FlugEditGuard] }, […] ] ] Token
Provider für Guards Page ▪ 51 export const ROUTER_PROVIDERS =
[ { provide: FlugEditGuard, useClass: AdvFlightEditGuard } { provide: AuthGuard, useClass: AdvAuthGuard } ];
Provider für Guards Page ▪ 52 export const ROUTER_PROVIDERS =
[ FlugEditGuard, AuthGuard ]; // app.module.ts @NgModule({ providers: [ ROUTER_PROVIDERS ], […] }) export class AppModule { }
DEMO Page ▪ 53
Lazy Loading Page ▪ 61
Warum Lazy Loading? • Module erst bei Bedarf nachladen •
Verbesserung der Start-Performance Page ▪ 62
Root Module mit Lazy Loading Page ▪ 63 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 ▪ 64 const FLUG_ROUTES =
[ { path: '', component: FlugBuchenComponent, […] }, […] } export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);
Konfiguration von Webpack • angular2-router-loader Page ▪ 65
DEMO Page ▪ 66
Preloading Page ▪ 67
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 ▪ 68
Preloading aktivieren Page ▪ 69 export const AppRoutesModule = RouterModule.forRoot(
ROUTE_CONFIG, { preloadingStrategy: PreloadAllModules });
Lazy Loading und Shared Services Page ▪ 70
Lazy Loading und Shared Modules Page ▪ 71 AppModule FlugModule
SharedModule includes includes (lazy) includes
Lazy Loading und Shared Modules Page ▪ 72 AppModule FlugModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lazy Loading und Shared Modules Page ▪ 73 AppModule FlugModule
SharedModule includes includes (lazy) includes AuthService AuthService
Lösung Page ▪ 74 AppModule FlugModule SharedModule includes (lazy) includes
CoreModule includes includes Core-Module soll nur ins AppModule eingebunden werden Globale Provider, wie AuthService & Shell
DEMO
Lösung (für Libraries) Page ▪ 76 AppModule FlugModule AuthModule includes
(lazy) CoreModule
Lösung (für Libraries) Page ▪ 77 AppModule FlugModule AuthModule includes
(lazy) includes (mit Services) CoreModule includes includes (ohne Services) Shell
AuthModule Page ▪ 79 @NgModule({ […], providers: [] }) export
class AuthModule { }
AuthModule Page ▪ 80 @NgModule({ […], providers: [] }) export
class AuthModule { static forRoot(): ModuleWithProviders { return { ngModule: AuthModule, providers: [AuthService, […]] } } }
DEMO Page ▪ 81
Zusammenfassung Platzhalter Child Routes Aux Routes Guards Lazy Loading Preloading
Kontakt [mail]
[email protected]
[blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer