angularjs - ng2 - ngx-translate angular 4

Localice las URL con ui-router y angular-translate

Question

Estoy usando ui-router para enrutamiento y traducción angular para traducciones. Lo que me gustaría lograr es tener el enlace del idioma seleccionado a la url así:

www.mydomain.com/en/
www.mydomain.com/ru/
www.mydomain.com/en/about
www.mydomain.com/ru/about

y responderá en consecuencia.

Intenté buscar ejemplos, pero no encontré nada. Si alguien implementara una solución similar, me encantaría saber cómo lo hiciste.

Gracias

Answer 1

He escrito una entrada de blog sobre el asunto exacto: http://fadeit.dk/post/angular-translate-ui-router-seo

Answer 2

La solución solo es válida si desea tener URL con el formato siguiente:

domain.com/{locale}/about

por lo tanto:

domain.com/en/about domain.com/mt/about

Recientemente se nos requirió implementar traducciones para la URL completa, por lo tanto:

domain.com/{locale}/{about}

donde {about} se traduce en el idioma respectivo:

domain.com/en/about domain.com/mt/fuqna

No sé si el enfoque de abajo es el mejor, sin embargo, funciona.

Para empezar, la primera diferencia es que configuramos los estados de ui-router para que se generen dinámicamente usando un servicio que recupera las rutas de un archivo JSON. Esto se hace de manera similar a la respuesta de @ ChrisT en: Angular - UI Router - agregar estados programáticamente

module.service("routingService", ["$http", function($http) {
self.get = function(options) {
return self.getByLocale({
market: options.urlMarketCode
});
};
self.getByLocale = function(options) {
var market = options.market;
// loads the different .json files based on the different market values passed, ex: routes-en.json
var configurationKey = "routes-" + market;
return $http({
method: "GET",
url: configurationKey + ".json",
headers: {
"Content-Type": "application/json"
}
}).then(function(response) {
if (response.data) {
return response.data;
}
return undefined;
}).catch(function(e) {
console.log(e);
});
};
return self;
}]);

Entonces consumiríamos el servicio de routingService anterior en el bloque de run de la aplicación:

// run the module and register the state change handler
angular.module("sportsbook-app").run(["$state", "$rootScope", "routingService", "stateService",
function ($state, $rootScope, routingService, stateService) {
// retrieve the routing heirarchy from file
routingService.get({
urlMarketCode: $rootScope.language
}).then(function (response) {
if (response) {
// add the routes to the $stateProvider
stateService.generate(response);
}
});
}
]);

Y finalmente, el servicio de stateService simplemente analiza el archivo JSON y crea la jerarquía de enrutamiento utilizando runtimeStates.addState de ChrisT.

Intentaré incluir una demostración de trabajo en un futuro próximo.

Los créditos también van a @ karl-agius.

Answer 3

Para las personas que deseen incluir la URL usando ngRoute (vine aquí en Google para exactamente eso), la he implementado de la siguiente manera.

(1) En mi .htaccess , capturé todas las URL sin un subdominio de idioma y lo redirigí al valor predeterminado (fr en mi caso). El único inconveniente real es que tengo que especificar cada idioma manualmente.

# https://.com/questions/19570572/htaccess-multi-language-site-with-sub-directories-and-default-301/19902914#19902914
# Add language to URL - redirect to default if missing
RewriteBase /
# empty url -> redirect to nl/
RewriteCond %{QUERY_STRING} !lang=(nl|fr)
RewriteRule ^$ fr/ [R=301,L]
# url is ONLY ''/nl'' or ''/fr'' -> redirect to /nl/ or /fr/ (adding slash)
RewriteRule ^(nl|fr)$ $1/ [R=301,L]
# now all urls have nl/ fr/ -> parse them
RewriteRule ^(nl|fr)/(.*)$ $2?lang=$1&%{query_STRING} [L]

(2) En el bloque de config mi proyecto Angular, simplemente analicé la URL para obtener el idioma actual.

config.$inject = [''$translateProvider'', ''$windowProvider''];
function config($translateProvider, $windowProvider) {
var $window,
language;
$window = $windowProvider.$get();
language = $window.location.pathname.replace(////g, '''');
//////
$translateProvider
.useStaticFilesLoader({
prefix: ''translations/'',
suffix: ''.json''
})
.useSanitizeValueStrategy(''sanitizeParameters'')
.preferredLanguage( language )
}

(3) Para obtener el idioma en mis archivos HTML, también lo agregué a $rootScope .

run.$inject = [''$window'', ''$rootScope''];
function run($window, $rootScope ) {
$rootScope.language = $window.location.pathname.replace(////g, '''');
}

Answer 4

Yo uso algo en este sentido:

CoffeeScript

angular.module(''app'')
.config([
''$stateProvider''
($stateProvider) ->
$stateProvider.state ''app'',
abstract: true
url: ''/{locale}''
$stateProvider.state ''app.root'',
url: ''''
$stateProvider.state ''app.root.about'',
url: ''/about''
])

JavaScript

angular.module(''app'').config([
''$stateProvider'', function($stateProvider) {
$stateProvider.state(''app'', {
abstract: true,
url: ''/{locale}''
});
$stateProvider.state(''app.root'', {
url: ''''
});
return $stateProvider.state(''app.root.about'', {
url: ''/about''
});
}
]);

Con esto, puede inyectar $stateParams en su controlador y obtener acceso a la configuración regional allí:

CoffeeScript

angular.module(''app'')
.controller(''appCtrl'', [
''$scope'', ''$stateParams''
($scope, $stateParams) ->
$scope.locale = $stateParams.locale
])

JavaScript

angular.module(''app'').controller(''appCtrl'', [
''$scope'', ''$stateParams'', function($scope, $stateParams) {
return $scope.locale = $stateParams.locale;
}
]);

O, si desea afectar a toda la página automáticamente, use el evento $stateChangeStart en un controlador de aplicación o similar:

CoffeeScript

$scope.$on ''$stateChangeStart'', (event, toState, toParams, fromState, fromParams) ->
$translate.use(toParams.locale)

JavaScript

$scope.$on(''$stateChangeStart'', function(event, toState, toParams, fromState, fromParams) {
$translate.use(toParams.locale);
});

Tenga en cuenta que si está usando angular-translate v1.x, debe usar $translate.uses lugar de $translate.use .