Comment changer dynamiquement de langue avec angular-translate et angular-ui-router?

Mon application utilise angulaires-traduire, angular-ui-routeur et les modèles. Les pages html de l'application à l'exception de l'index.html sont emballés dans des modèles et servis à partir D'Amazon CloudFront soutenu par S3. Ce que je voudrais faire est de trouver un moyen de changer la langue dynamiquement en fonction d'un code de deux lettres après le nom de domaine et aussi si possible ramasser sur la locale de l'utilisateur et utiliser cela pour la commutation par défaut.

La raison pour laquelle je voudrais faire ceci est pour des fins de référencement car J'ai lu que Google recommande de mettre un code de pays dans l'adresse comme ci-dessous.

Voici ce que j'ai jusqu'à présent:

le fichier du routeur

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

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

Quelque part, je voudrais faire en sorte que lorsqu'un moteur de recherche choisit:

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

Qui angulaire routeur commutateurs à la appropriée de la langue de fichier avant de servir la webapi.fichier html.

Toute suggestion sur la façon dont je pourrais le faire serait très appréciée. Idéalement, j'aimerais voir un exemple simple avec un commutateur de fichier de langue qui pourrait m'aider moi et aussi d'autres dans la communauté à faire ce qui est nécessaire.

veuillez noter qu'il y a une autre question semblable:

Localisez les URL avec ui-routeur et angular-traduisez

les réponses sont bonnes mais j'espère aussi qu'en ouvrant ce question je peux obtenir une réponse encore meilleure et plus à jour, peut-être avec quelques conseils SEO internationalization jeté dans. Je pense juste que c'est une chose important que le plus de réponses pour aider les gens sur ce forum le mieux.

22
demandé sur Community 2016-04-14 15:38:09

1 réponses

vous devez créer un État de routeur-ui abstrait commun et y configurer vos paramètres de langue:

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

et après votre état home serait enfant du commun:

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

maintenant vous pouvez configurer le commutateur de langue sur l'événement de changement d'état:

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

[19.04.2016] je déclare que Google n'est toujours pas en mesure de analyser votre application web de manière intelligente. Une question relative à la - SEO: comment Google index Angular applications 2016

j'ai Donc ainsi que @shershen , je vous conseille d'utiliser pré-rendu.io service pour un meilleur RÉFÉRENCEMENT.

10
répondu Stepan Suvorov 2017-05-23 10:29:18