如何切换语言动态地角翻译和角UI的路由器？ [英] How can I switch languages dynamically with angular-translate and angular-ui-router?

问题描述

我的应用程序使用角转换，棱角分明的UI路由器和模板。该应用程序HTML页面中的index.html除外打包成模板，从S3支持亚马逊的CloudFront的服务。我想这样做的是找到一种方法来切换动态取决于域名后两个字母的code，也可能的话拿起用户区域设置并使用默认切换语言。

My application is using angular-translate, angular-ui-router and templates. The application html pages with the exception of the index.html are packed into templates and served from Amazon CloudFront backed by S3. What I would like to do is to find a way to switch the language dynamically depending on a two letter code after the domain name and also if possible pick up on the user locale and use that for default switching.

我想这样做的原因是搜索引擎优化的目的，因为我已阅读，谷歌建议将一国code到地址如下。

The reason I would like to do this is for SEO purposes as I have read that Google recommends putting in a country code into the address as below.

下面是我到目前为止有：

Here's what I have so far:

路由器文件

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

    var homeAccess = {
        name: 'home.access',
        url: 'access',
        views: {
            'home@': {
                templateProvider: ['$templateCache', ($templateCache) => {
                    return $templateCache.get('webapi.html');
                }],
            }
        }
    };

不知怎的，我想作这样，当一个搜索引擎选择：

Somehow I would like to make it so that when a search engine chooses:

www.example.com/de/home/webapi  or
www.example.com/en/home/webapi  or
www.example.com/fr/home/webapi

这角路由器切换到合适的语言文件服务的webapi.html文件之前。

That angular router switches to the appropriate language file before serving the webapi.html file.

这是我怎么能做到这一点任何建议将是多少AP preciated。理想情况下，我想看到​​一个语言文件切换一个简单的例子，这将有助于我和其他人也是在社会上做什么需要。

Any suggestions on how I could do this would be much appreciated. Ideally I'd like to see a simple example with a language file switcher that would help me and also others in the community to do what's needed.

请注意还有另外一个类似的问题在那里：

Please note there's another similar question out there:

<一个href=\"http://stackoverflow.com/questions/24281652/localize-urls-with-ui-router-and-angular-translate?rq=1\">Localize URL与UI的路由器和角翻译

问题的答案有好的，但我也希望通过开放这个问题，我可以抛出一些国际搜索引擎优化技巧得到一个更美好，更多，更新的答案，或许，我只是觉得这是一个非常重要的事情了在更多的答案，以帮助人们在这个论坛就越好。

The answers there are good but I'm also hoping that by opening up this question I can get an even better and more updated answer, perhaps with some internationalization SEO tips thrown in. I just think this is such an important thing that the more answers to help people on this forum the better.

推荐答案

您需要创建通用的抽象UI路由器状态和设置您的语言设置有：

You need to create common abstract ui-router state and setup your language settings there:

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

和后您的首页状态会从共同的孩子：

and after your home state would be child from common:

$stateProvider.state('common.home', {
  url: '/home',
  templateUrl: 'views/home.html',
});

现在你可以在状态更改事件设置语言切换：

now you can setup language switch on state change event:

app.run(($rootScope) => {
  $rootScope.$on('$stateChangeSuccess', (event, toState, toParams) => {
    if(toParams.lang && $translate.use() !== toParams.lang){
      $translate.use(toParams.lang);
    }
  });
});

[2016年4月19日] 我宣布，谷歌仍然不能够巧妙的方式来解析你的web应用。相关的问题 - <一个href=\"http://stackoverflow.com/questions/35211827/seo-how-does-google-index-angular-applications-2016\">SEO:如何谷歌索引角应用2016年

[19.04.2016] I declare that Google is still not able to parse your web application in clever way. Related question - SEO: How does Google index Angular applications 2016

所以我以及 @shershen 我建议使用 prerender.io 服务为更好的搜索引擎优化。

So I as well as @shershen I recommend to use prerender.io service for better SEO.

这篇关于如何切换语言动态地角翻译和角UI的路由器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！