Как динамически переключаться между языками с помощью angular -translate и angular -ui-router?

В моем приложении используется angular -translate, angular -ui-router и templates. Страницы html-приложений, за исключением index.html, упаковываются в шаблоны и подаются с Amazon CloudFront под управлением S3. То, что я хотел бы сделать, это найти способ динамического переключения языка в зависимости от двухбуквенного кода после имени домена, а также, если это возможно, выбрать язык пользователя и использовать его для переключения по умолчанию.

Причина, по которой я хотел бы сделать это, - это SEO-цели, поскольку я прочитал, что Google рекомендует ввести код страны в адрес, как показано ниже.

Вот что я до сих пор:

Файл маршрутизатора

    var home = {
        name: 'home',
        url: '/home/'
    };

    var homeAccess = {
        name: 'home.access',
        url: 'access',
        views: {
            '[email protected]': {
                templateProvider: ['$templateCache', ($templateCache) => {
                    return $templateCache.get('webapi.html');
                }],
            }
        }
    };

Как-то я хотел бы сделать так, чтобы при выборе поисковой системы:

www.example.com/de/home/webapi  or
www.example.com/en/home/webapi  or
www.example.com/fr/home/webapi

Этот маршрутизатор angular переключается на соответствующий языковой файл перед тем, как обслуживать файл webapi.html.

Любые предложения о том, как я могу это сделать, будут высоко оценены. В идеале я бы хотел увидеть простой пример с помощью переключателя языковых файлов, который помог бы мне, а также другим в сообществе сделать то, что нужно.

Обратите внимание на другой аналогичный вопрос:

Локализовать URL с помощью ui-router и angular -translate

Ответы хорошие, но я также надеюсь, что, открыв этот вопрос, я могу получить еще лучший и более свежий ответ, возможно, с некоторыми подсказками SEO-интернационализации. Я просто думаю, что это такая важная вещь, тем больше ответов, чтобы помочь людям на этом форуме, тем лучше.

Ответ 1

Вам нужно создать общее абстрактное состояние ui-router и настроить там языковые настройки:

$stateProvider.state('common', {
  abstract: true,
  url: '/{lang:(?:es|en)}'
});

и после того, как ваше состояние home будет дочерним с общим:

$stateProvider.state('common.home', {
  url: '/home',
  templateUrl: 'views/home.html',
});

теперь вы можете настроить языковой переключатель на событие изменения состояния:

app.run(($rootScope) => {
  $rootScope.$on('$stateChangeSuccess', (event, toState, toParams) => {
    if(toParams.lang && $translate.use() !== toParams.lang){
      $translate.use(toParams.lang);
    }
  });
});

[19.04.2016] Я заявляю, что Google по-прежнему не в силах разобрать ваше веб-приложение умным способом. Связанный с нами вопрос - SEO: как Google index Angular приложения 2016

Поэтому я, а также @shershen, рекомендую использовать prerender.io для улучшения SEO.