angularjs之如何使用angular-translate和angular-ui-router动态切换语言

我的应用程序使用的是angular-translate，angular-ui-router和模板。除index.html之外的应用程序html页面均打包到模板中，并由S3支持的Amazon CloudFront提供服务。我想做的是找到一种方法，根据域名后的两个字母代码动态切换语言，并且在可能的情况下，还可以根据用户语言环境选择语言，并将其用于默认切换。

我之所以这样做是出于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 

该 Angular 路由器在提供webapi.html文件之前会切换到适当的语言文件。

关于如何执行此操作的任何建议将不胜感激。理想情况下，我想看一个带有语言文件切换器的简单示例，该示例可以帮助我以及社区中的其他人完成所需的工作。

请注意，还有另一个类似的问题:

Localize URL's with ui-router and angular-translate

那里的答案很好，但是我也希望通过打开这个问题，我可以获得一个更好，更更新的答案，也许可以引入一些国际化的SEO技巧。我只是认为这是一件很重要的事情，因此更多的答案帮助这个论坛上的人们更好。

请您参考如下方法:

您需要创建通用的抽象ui路由器状态，并在此处设置语言设置:

$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仍然无法以巧妙的方式解析您的Web应用程序。相关问题- SEO: How does Google index Angular applications 2016

因此，我和 @shershen 一样，我建议使用 prerender.io服务以获得更好的SEO。