Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Angular route localization
Miroslav Jonaš
May 10, 2017
Programming
0
45
Angular route localization
Miroslav Jonaš
May 10, 2017
Tweet
Share
More Decks by Miroslav Jonaš
See All by Miroslav Jonaš
meeroslav
0
2
meeroslav
0
17
meeroslav
0
16
meeroslav
0
9
meeroslav
0
52
meeroslav
0
36
meeroslav
0
51
meeroslav
0
50
Other Decks in Programming
See All in Programming
nkjzm
1
160
lilobase
PRO
1
710
grapecity_dev
0
180
amaotone
15
7.8k
grapecity_dev
0
170
takahi5
1
420
joergneumann
0
140
korosuke613
2
240
gernotstarke
0
380
minamijoyo
3
480
grapecity_dev
0
180
mehowte
0
180
Featured
See All Featured
smashingmag
230
18k
mthomps
38
2.3k
garrettdimon
288
110k
addyosmani
311
21k
keathley
20
700
denniskardys
219
120k
morganepeng
18
1.2k
destraynor
223
47k
bkeepers
321
53k
mza
80
4.1k
productmarketing
5
720
lauravandoore
10
1.5k
Transcript
ANGULAR ROUTE LOCALIZATION ANGULAR MEETUP / APRIL 2017
ANGULAR ROUTE LOCALIZATION WHAT IS IT? ▸ Route localization ▸
Angular package ▸ Built for version 2+ ▸ Typescript ▸ v0.7.0
ANGULAR ROUTE LOCALIZATION WHY WOULD YOU CARE? www.site.com?page=98cf9c41-00fe-4f39-a813-91fc8a125770 www.site.com/users/4/account/profile www.site.com/watumiaji/4/akaunti/wasifu
‣ Do I support multiple languages? ‣ Do I plan to support multiple languages? ‣ Can I guarantee there will be no language support?
THE STORY BEHIND
ANGULAR ROUTE LOCALIZATION HOW DOES IT WORK? ▸ APP_INITIALIZER to
hijack the routes ▸ Route data property ▸ [routerLink] + Pipe ▸ Service for dynamic routes ▸ StartNavigation event ▸ ngx-translate (currently)
ANGULAR ROUTE LOCALIZATION [ { path: ‘home’, component: HomeComp },
{ path: ‘users’, children: [ { path: ‘’, component: UsersComp }, { path: ‘:id’, component: UserComp }, { path: ‘:id/account’, component: AccountComp} ] } ] original routes [ { path: ‘’, redirectTo: ‘en’, pathMatch: ‘full’ }, { path: ‘de’, children: [ { path: ‘startseite’, component: HomeComp }, { path: ‘benutzer’, children: [ { path: ‘’, component: UsersComp }, { path: ‘:id’, component: UserComp }, { path: ‘:id/bericht’, component: AccountComp} ] } ] } ] translated routes (*de)
ANGULAR ROUTE LOCALIZATION { “ROUTER.users”: “benutzer”, “ROUTER.profile”: “profil”, “ROUTER.account”: “bericht”
} + /users/4/account/profile = de/benutzer/4/bericht/profil i18n/de.json
ANGULAR ROUTE LOCALIZATION BUT NOT SO SIMPLE… ▸ AOT vs
Lazy loading ▸ No event after lazy load ▸ Router changes
TL;DEMO
ANGULAR ROUTE LOCALIZATION CURRENT STATE ▸ Lazy loading still not
there ▸ Tight coupling with ngx-translate ▸ Use it ▸ Find issues ▸ Help solve them
ANGULAR ROUTE LOCALIZATION ▸ npm install —save localize-router ▸ https://www.npmjs.com/package/localize-router
▸ https://github.com/Greentube/localize-router ▸ @meeroslav ▸ https://github.com/meeroslav
THANK YOU