我的应用程序正在使用角度转换,角度定位和模板。除了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提示投入。我只是认为这是一个重要的事情,更多的答案帮助这个论坛上的人更好。
您需要创建常见的抽象ui路由器状态并在其中设置您的语言设置:
$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); } }); });
[19.04.2016]我声明Google仍然无法以聪明的方式解析您的网络应用程序。相关问题 – SEO: How does Google index Angular applications 2016
所以我以及@shershen我建议使用prerender.io服务更好的SEO。