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

Question

我的应用程序使用angular-translate,angular-ui-router和模板.除index.html之外的应用程序html页面被打包到模板中,并由S3支持的Amazon CloudFront提供.我想要做的是找到一种方法来根据域名后面的两个字母代码动态切换语言,如果可能的话,还可以选择用户区域设置并将其用于默认切换.

我想这样做的原因是出于搜索引擎优化的目的,因为我读过谷歌建议将国家代码放入地址,如下所示.

这是我到目前为止所拥有的:

路由器文件

    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文件之前,该角度路由器会切换到相应的语言文件.

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

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

使用ui-router和angular-translate本地化URL

那里的答案很好,但我也希望通过开放这个问题,我可以得到一个更好,更新的答案,或许有一些国际化的SEO技巧投入.我只是认为这是一个如此重要的事情,更多的答案帮助这个论坛上的人们更好.

Answer 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如何为Angular应用程序2016编制索引

所以我和@shershen我建议使用prerender.io服务以获得更好的SEO.