seo Question posted in
Some basic information to get you started with this can be found here.

AngularJS multilanguage routing – SEO

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?

Tags:

2

Answers


  1. 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();
            }
        });
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search