angularjs - ng2 - ¿Cómo puedo cambiar los idiomas dinámicamente con angular-translate y angular-ui-router?

ngx-translate angular 4

Question

Mi aplicación está usando anguloso traductor, anguloso ui-router y plantillas. Las páginas html de la aplicación, con la excepción del index.html, se empaquetan en plantillas y se sirven desde Amazon CloudFront respaldado por S3. Lo que me gustaría hacer es encontrar una manera de cambiar el idioma de forma dinámica según un código de dos letras después del nombre de dominio y también, si es posible, seleccionar la configuración regional del usuario y usarlo para el cambio predeterminado.

La razón por la que me gustaría hacer esto es por motivos de SEO, ya que he leído que Google recomienda poner un código de país en la dirección que figura a continuación.

Esto es lo que tengo hasta ahora:

El archivo enrutador

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

De alguna manera me gustaría hacerlo para que cuando un motor de búsqueda elija:

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

Ese enrutador angular cambia al archivo de idioma apropiado antes de servir el archivo webapi.html.

Cualquier sugerencia sobre cómo podría hacer esto sería muy apreciada. Idealmente, me gustaría ver un ejemplo simple con un conmutador de archivos de idioma que me ayude a mí y a otros en la comunidad a hacer lo que sea necesario.

Tenga en cuenta que hay otra pregunta similar por ahí:

Localice las URL con ui-router y angular-translate

Las respuestas son buenas, pero también espero que al abrir esta pregunta pueda obtener una respuesta aún mejor y más actualizada, tal vez con algunos consejos de internacionalización sobre SEO. Creo que esto es algo tan importante que cuantas más respuestas para ayudar a la gente en este foro mejor.

Answer 1

Debe crear un estado de enrutador ui abstracto común y configurar sus ajustes de idioma allí:

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

y después de su estado de home sería hijo de común:

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

Ahora puede configurar el cambio de idioma en el evento de cambio de estado:

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

[19.04.2016] Declaro que Google aún no puede analizar su aplicación web de forma inteligente. Pregunta relacionada - SEO: ¿Cómo indexa Google las aplicaciones angulares 2016?

Así que, al igual que @shershen , recomiendo usar el servicio prerender.io para un mejor SEO.