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

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

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

вот что у меня пока есть:

роутер файл

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

    var homeAccess = {
        name: 'home.access',
        url: 'access',
        views: {
            'home@': {
                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

этот угловой маршрутизатор переключается на соответствующий языковой файл перед обслуживанием webapi.HTML-файл.

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

обратите внимание, что есть еще один аналогичный вопрос:

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

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

22
angular-translate angular-ui-router angularjs

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 индексирует угловые приложения 2016

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

10