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

Question

我的应用程序正在使用 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 技巧。我只是认为这是一个非常重要的问题在这个论坛上帮助人们的答案越多越好。

Answer 1

您需要创建通用摘要 ui-router 状态并在那里设置您的语言设置：

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

并且在你的 home 状态将是 child 来自 common:

$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。

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

How can I switch languages dynamically with angular-translate and angular-ui-router?

angularjs

angular-ui-router

angular-translate