Localiser les URL avec ui-router et angular-translate

La solution n'est valable que si vous voulez avoir des URLs ci-dessous format:

domain.com/{locale}/about

donc:

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

Récemment, nous avons été nécessaires pour mettre en œuvre des traductions pour la totalité de l'URL, donc:

domain.com/{locale}/{about}

où {about} est traduit dans la langue respective:

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

Je ne sais pas si l'approche est la meilleure, mais elle fonctionne.

Pour commencer, la première différence est que nous avons mis en place ui-router les états à être généré dynamiquement à l'aide d'un service qui récupère les routes à partir d'un fichier JSON. C'est fait de la même manière à @ChrisT réponse à: Angulaire de l'INTERFACE utilisateur du Routeur - ajouter par les états

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;
}]);

Nous consommons ci-dessus routingService dans le run bloc de l'application:

//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);
            }
        });
    }
]);

Et enfin la stateService simplement analyse le fichier JSON et crée la hiérarchie de routage à l'aide du ChrisT runtimeStates.addState.

Je vais essayer d'inclure un travail de démonstration dans un avenir proche.

Crédits vont également à @karl-agius.

Pour les personnes qui souhaiteraient inclure l'URL à l'aide de ngRoute (je suis venu ici à googler pour exactement), j'ai mis en œuvre comme suit.

(1) Dans mon .htaccess j'ai pris toutes les Url sans langue de sous-domaine et redirigé vers la valeur par défaut (fr dans mon cas). Le seul véritable inconvénient est que je dois spécifier toutes les langues manuellement.

# https://stackoverflow.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) Dans mon Angulaire du projet config bloc j'ai alors simplement analysé l'URL pour obtenir le langage courant.

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) afin d'obtenir la langue dans mes fichiers HTML j'ai également ajouté à la $rootScope.

run.$inject = ['$window', '$rootScope'];

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