Comments (4)
I've been thinking about this and think the proposal for passing in the module is fine.
I'm wondering about your multilingual url approach however. How do you intend to support sharing of deep links, but using the end user's preferred language?
For example, if a swedish user shares /sv/om
with an english user, what does the english user see? Have you also considered how to handle a "default" language?
from angular.
The example above already supports a "default" language, if a language is not specified the :lang
property will default to "en". On the actual site (written in angular v1) we have a hard redirect before the angular application even boots up so that this situation is a bit more clear to the end user.
export default function onBoot() {
let dfrPlayer = $.Deferred();
let dfrSitemap = $.Deferred();
let currentPath = location.pathname + location.hash;
let matches = currentPath.match('^\/(en|fi|sv|no)\/.*');
let language;
if (!matches) {
location.assign(location.protocol + '//' + location.host + '/sv/');
// or redirect using some data present in the cookies :)
} else {
language = matches[1];
HttpService.language = language;
console.log("Loading Sitemap");
loadSitemap(dfrPlayer, language, 1);
loadPlayer(dfrSitemap, language, 1);
}
return $.when(dfrPlayer, dfrSitemap);
}
One way to handle translation on the FE side is as follows (consider this a thought experiment):
When a Swedish user shares /sv/om
and this link is opened by an english user we would first retrieve the module associated with /sv/om
(app.about
) and lookup the english path equivalent i.e. /en/about
. This represents the simplest case since there are no param values present in the state.
Given the following sitemap:
{
'en': [
...
{'module': 'app.games', 'path': '/games/:gameId'}
],
'sv': [
...
{'module': 'app.games', 'path': '/spella/:gameId'}
]
}
lets assume that a user shared /spella/123
. This is a bit more complex since there are parameters involved which need to be remapped.
The url resolution would work as follows:
- Load the module associated with
/spella/123
i.e.app.games
and lookup the English equivalent i.e./games/:gameId
. Perhaps make use of theUrlMatcher
andUrlMatcherFactory
class to do this. - Determine the parameters of
/spella/123
given the generic url/spella/:gameId
in order to map out the parameters. This would result in {"gameId": 123} - Template the parameters on the path
/games/:gameId
fully transforming the path to/games/123
- Redirect.
Another possible way to handle this is via the sitemap itself. When a user loads a sitemap we return the alternate urls for each language as follows:
{
'en': [
{'module': 'app.home', 'path': '',
"alternate": {
"sv": ""
}
},
{'module': 'app.about', 'path': '/about',
"alternate": {
"sv": "/om"
}
},
],
...
}
This might work if the url space is relatively small.
I think the main point here is that people will choose to do this in different ways and trying to find a specific solution will inevitably lead to opinions. The
You can please some of the people all of the time, you can please all of the people some of the time, but you canβt please all of the people all of the time
situation.
Allowing the options.config
to receive the state module would enable a multi-lingual provider a hook to resolve urls. Translating the urls needs to be tackled separately IMO. It could very well be that passing the state module in the options.config
might help the translation process but some people might choose a naive approach as demonstrated in the sitemap with the alternate case.
In a way I feel that the ui-router should be responsible for the hook and leave the actual translation strategies open. You are a better judge than me of course and I'd love to hear your opinion.
from angular.
What are you thoughts on this @christopherthielen?
from angular.
people will choose to do this in different ways and trying to find a specific solution will inevitably lead to opinions
I feel that the ui-router should be responsible for the hook and leave the actual translation strategies open.
Completely agree with these statements
Here's a proof of concept in ng1: http://plnkr.co/edit/cIVAcI9ky5a7BOTsa7b6?p=preview
It uses urlmatcher to register a bunch of redirects (one for each state + language combo). It redirects to the language stored in localstorage.
from angular.
Related Issues (20)
- Support Angular 11 HOT 1
- Angular 12 HOT 8
- Future of ui-router? HOT 6
- Error: State 'quizzes' is already defined HOT 2
- uiSref doesn't work unless matching "name". Can't use full path/name. HOT 2
- How to lazy load with chunks HOT 11
- Incompatibility with Angular v13 - removal of `NgModuleFactoryLoader` HOT 1
- Angular 13 Support (libs update) and version policy HOT 13
- [Discussion] Monorepo requirements for ui-router packages HOT 11
- Redirects on local anchor reference HOT 2
- onError not redirecting HOT 1
- Angular v14 support HOT 2
- [bug(?)]: future state declaration's data not passed/merged to/with loaded child state HOT 1
- Angular 15 support HOT 5
- MergeInjector breaks normal Angular DI priority HOT 3
- [question] Lazy loaded module empty after creating
- Breaks when building with Angular 16
- Angular 16 support HOT 9
- Angular 17 support HOT 4
- Incorrect Ui Routing on iOS 17 safari private browsing mode.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular.