AngularJS multilanguage routing

Question

I have an AngularJS webapp. I´m changing the application so the URLs can be multilanguage (for SEO indexing purposes).

I´m setting up my app.js, like this:

$routeProvider.when('/:language', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});     
    $routeProvider.when('/:language/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'});

Then, in a service I get the language parameter with $routeParams and call my translation code with angular-translate to serve the page in the corresponding language.

Everything is working so far.

But, moreover, in the menu bar, I have a select combo box to choose the language. So, when user change the language, the url language parameter should change.

How should I do this?

gaiazov · Accepted Answer · 2015-03-03 19:44:41Z

Here's an example. Like I said in your other question, I'd use ui-router for this.

http://plnkr.co/edit/bCNgS07BblMHz55VBRSQ?p=preview

The language dropdown will preserve the currently selected state. So if you go to home -> paragraph, then change language, you will remain on the paragraph route but the language parameter will change.

app.js:

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/en');

    $stateProvider
        .state('lang', {
            url: '/:language',
            templateUrl: 'partial-lang.html',
            abstract: true,
            controller: function($state, $scope) {
              $scope.changeLanguage = function(language) {
                $state.go($state.current.name, {language: language});
              }
            }
        })

        .state('lang.home', {
            url: '',
            templateUrl: 'partial-home.html'
        })

        .state('lang.home.list', {
            url: '/list',
            templateUrl: 'partial-home-list.html',
            controller: function($scope) {
                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
            }
        })

        .state('lang.home.paragraph', {
            url: '/paragraph',
            template: 'I could sure use a drink right now.'
        })

        .state('lang.about', {
            url: '/about',
            templateUrl: 'partial-about.html'
        });
});

partial-lang.html:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref=".home">Home</a></li>
        <li><a ui-sref=".about">About</a></li>
        <li class="dropdown">
          <a href class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Language: {{$state.params.language | uppercase}} <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href ng-click="changeLanguage('en')">English</a></li>
            <li><a href ng-click="changeLanguage('fr')">Français</a></li>
            <li><a href ng-click="changeLanguage('ru')">Русский</a></li>
          </ul>
        </li>
    </ul>
</nav>

<div class="container">
    <div ui-view></div>
</div>

index.html

<body ng-app="routerApp">
  <div ui-view></div>
  <pre>
    <p>state = {{$state | json}}</p>
  </pre>
</body>

The rest of the files are self-explanatory

Panchitoboy · Accepted Answer · 2015-03-04 08:10:09Z

0

You bind your combo box to a variable, then you can use $watch to know when it changes, and finally you can user $route to update language.

$watch info

$route info

Update:

Something like this:

        $scope.$watch('language', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                $route.updateParams({language: newValue});
            }
        });

UPDATE VERSION 1.0.7

        $scope.$watch('language', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                var path = $location.path();
                path = path.replace('/'+oldValue+'/', '/'+newValue+'/');
                console.log(path);
                $location.path(path);
                $route.reload();
            }
        });

edited Mar 4, 2015 at 8:10

answered Mar 3, 2015 at 18:28

Panchitoboy

8409 silver badges18 bronze badges

2 Comments

Rober Over a year ago

You mean update language in the Url? with Route? Could you provide an example?

Rober Over a year ago

Ok, the part I´m looking for is: $route.updateParams({language: newValue}); but, I don´t know why it´s not working for me. Does this work in AngularJs 1.0.7? I don´t see it in the developer docs.

Collectives™ on Stack Overflow

AngularJS multilanguage routing

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related