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

我的应用程序正在使用角度转换，角度定位和模板。除了index.html之外的应用程序html页面都包含在模板中，并由S3支持的Amazon CloudFront提供。我想要做的是找到一种方法，根据域名之后的两个字母代码动态切换语言，并且如果可能，请在用户区域设置上选择，并将其用于默认切换。

我想这样做的原因是为了搜索引擎优化的目的，因为我已经看到，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文件之前切换到相应的语言文件。

任何有关如何做到这一点的建议将不胜感激。理想情况下，我想看到一个简单的例子，一个语言文件切换器，可以帮助我和社区中的其他人做所需的事情。

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

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

答案在那里是好的，但我也希望通过开放这个问题，我可以得到一个更好的和更新的答案，也许一些国际化的SEO提示投入。我只是认为这是一个重要的事情，更多的答案帮助这个论坛上的人更好。

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

$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);
    }
  });
});