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
120
Angular route localization
Miroslav Jonaš
May 10, 2017
Tweet
Share
More Decks by Miroslav Jonaš
See All by Miroslav Jonaš
Nx - The Obvious Choice
meeroslav
0
24
The Age of monorepos
meeroslav
0
10
Nx - The Easy Choice / AngularVienna
meeroslav
0
23
Nx - The Easy Choice
meeroslav
0
99
Angular Component Router (serbian)
meeroslav
0
76
New router on the block - Angular Vienna Dec '20
meeroslav
0
13
Hello generics, goodbye boilerplate (WAD live)
meeroslav
0
25
Hello generics, goodbye boilerplate
meeroslav
0
25
GDG_DevFest_How_to_cook_with_RxJS.pdf
meeroslav
0
89
Other Decks in Programming
See All in Programming
Yumemi.apk #6 ~ゆめみのAndroidエンジニア 日頃の成果大発表会!~ Session 2
blendthink
1
200
あなたの会社の古いシステム、なんとかしませんか?~システム刷新から考えるDX化への道筋とバリエーション~/webinar20220420-grapecity
grapecity_dev
0
120
Loom is Blooming
josepaumard
3
490
From Java 11 to 17 and beyond
josepaumard
0
280
Micro Frontend Routing – Solutions for mature applications - iJS 04/2022
michaelzikes
0
150
近況PHP / PHP in now a days
uzulla
2
770
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
300
Named Document って何?
harunakano
0
180
Develop your CI tools
xgouchet
2
180
PublishでWebサイトを構築してみた / generate_website_with_publish
uhooi
2
110
人類には難しいZynqで組み込みRust
ikemori
0
470
How to get satisfaction from ungrateful work: A journey into updating Kotlin
syrinet
0
110
Featured
See All Featured
KATA
mclloyd
7
8.6k
Agile that works and the tools we love
rasmusluckow
319
19k
Fireside Chat
paigeccino
11
1.2k
Building Adaptive Systems
keathley
25
1.1k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
Writing Fast Ruby
sferik
612
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
The Cult of Friendly URLs
andyhume
68
4.7k
How to train your dragon (web standard)
notwaldorf
57
3.8k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
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