Routing for a multi language app (/en /fr /ge etc)

[Adrian]

Hello,

I am trying to figure out how to setup the Angular routing for a multi language webpage/app. In this app different languages should be accessible with a language prefix such as /en /fr etc.   

Examples: 

www.myapp.com/en <--- welcome page in English

www.myapp.com/fr <-- welcome page in French

www.myapp.com <-- should redirect to the appropriate language (/en or /fr) according to some logic in a controller

www.myapp.com/en/some-content <-- a sub page in English

www.myapp.com/fr/some-content <-- the same subpage in French

www.myapp.com/some-content <-- should redirect to the appropriate language (/en/some-content or /fr/some-content) according to some logic in a controller

I guess I could do the routing this way

$routeProvider.

    when('/', {

      controller: 'MyController',

      templateUrl: '/views/welcome.html'

    }).

    when('/en', {

      controller: 'MyController',

      templateUrl: '/views/welcome.html'

    }).

    when('/fr', {

      controller: 'MyController',

      templateUrl: '/views/welcome.html'

    }).

    when('/:language/some-content, {

      controller: 'MyController',

      templateUrl: '/views/some-content.html'

    }).

    when('/some-content', {

      controller: 'MyController',

      templateUrl: '/views/some-content.html'

    }).

...

Where :language is extracted with $routeParams in MyController and used as parameter for some translation directive. But this routing doesn't feel right and gets very ugly when the number of languages and sub pages grow. How can I setup the routing in another better way?

[Jose Luis Rivas]

What about using two controllers like:

/:firstlevel

This controller would check if it's a two letter firstlevel and then
show up language stuff. If not then is an slug and show the content.

/:language/:slug

You know what to do here.

> --
> You received this message because you are subscribed to the Google
> Groups "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/groups/opt_out.


--
Jose Luis Rivas
http://joseluisrivas.net/

[Martin Alix]

Could you deal with this server side?

[Raul Vieira]

I think server side is the way to go, but to be clear: the route paths are client side and don't need to have lang specified.  The server is responsible the  for inspecting the URL and serving ng and the corresponding locale file:

(http://code.angularjs.org/:your-ng-version-here/i18n/) 

Ng will then be bootstrapped with your locale.  By default this will be en-us.

I would recommend using angular-translate for your translation needs.  You configure the translate in the bootstrap of your app and get a handle on the locale by using the $locale or $localeProvider.  The former is used in a config block while the latter is in a run block.  You can get the id by accessing id property on an instance or $get().id when using the provider (I'm working from memory so this may be slightly incorrect).  You'll get something back in this form: lang-country you can split it if you need the lang or configure angular-translate to be keyed off of both.

I hope that helps.

Raul

[Adrian]

Thank you everyone. Server side seems like a good way to go. Not the least to be able to bootstrap angular with the language files already loaded (as they are retrieved from a backend). 

Best

Adrian

[Martin Alix]

BTW, with Node, I use https://github.com/jeresig/i18n-node-2 to manage my translations...

[Adrian]

Thanks! Will check it out

[Mahmoud Abdel-Fattah]

Hey Adrian, it is almost one year but I could not find any resource online for the same question. So, may I ask how did you solve this issue?

[Daphne Maddox]

I'm going to sound like a broken record here, but this seems like a perfect use case for a combination of ui-router and angular-translate.  (Maybe you can do this with ngRoute, I don't know, never used it).  I do know that in ui-router it's really easy to set up the path segment that represents the language as a parameter in the url matcher (e.g. '/mypath/:lang/mypage'.  From there, you have the chosen language available in your controller as a value of the $params service, and can easily set the preferred language for angular-translate to provide the correct text...

[Joberto Diniz]

Hi, we also have to implement this feature. 

We're using angular-translate and ngRoute.

How would be the best way to change the language specified in the route? Maybe listen to routeChange and then call the angular-translate to change the language, is that the a reasonable way to deal with this?

Why do I have to deal this in the controller, like you suggested?

[Daphne Maddox]

I don't know ngRoute so I can't help you with that.

In ui-router you can use a url pattern like '/:lang' in an abstract root state.  By defining it that way, you can have a high-level controller that reads from $params.lang and sets the value for angular-translate, so that all of your pages are rendered to the specified state for you.  It is my suspicion that ngRoute doesn't give you this capability, so I'm not sure how it would best be done.

[Raul Vieira]

ngRoute allows you to specify path params as Daphne described minus the abstract state business.  To get at the params you would use $routeParams.

Sent from my iPad

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.

For more options, visit https://groups.google.com/d/optout.

[Mahmoud Abdel-Fattah]

Thank you guys, I'll look into your suggestions.

ᐧ

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/wSOHrGk9a7w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Best,

Mahmoud M. Abdel-Fattah

http://about.me/mabdelfattah

[Sander Sink]

Hi,

For future references I've written a post on the topic: http://fadeit.dk/post/angular-translate-ui-router-seo

Sander