Come posso cambiare lingua in modo dinamico con angular-translate e angular-ui-router?

Question

La mia applicazione utilizza angular-translate, angular-ui-router e templates. Le pagine html dell'applicazione, ad eccezione di index.html, sono impacchettate nei template e sono fornite da Amazon CloudFront supportato da S3. Quello che mi piacerebbe fare è trovare un modo per cambiare la lingua in modo dinamico a seconda di un codice a due lettere dopo il nome del dominio e, se possibile, raccogliere le impostazioni locali dell'utente e utilizzarle per il cambio predefinito.

Il motivo per cui mi piacerebbe farlo è a scopo di SEO in quanto ho letto che Google consiglia di inserire un codice di paese nell'indirizzo come di seguito.

Ecco quello che ho finora:

Il file router

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

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

In qualche modo mi piacerebbe fare in modo che quando un motore di ricerca sceglie:

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

quel router angolare passa al file di lingua appropriato prima di pubblicare il file webapi.html.

Qualsiasi suggerimento su come avrei potuto farlo sarebbe molto apprezzato. Idealmente mi piacerebbe vedere un semplice esempio con uno switcher di file di linguaggio che aiuterebbe me e altri nella comunità a fare ciò che è necessario.

Si prega di notare c'è un'altra domanda simile là fuori:

Localize URL's with ui-router and angular-translate

Le risposte ci sono buone ma sono anche la speranza che con l'apertura a questa domanda posso ottenere una risposta ancora migliore e più aggiornata, forse con alcuni suggerimenti SEO di internazionalizzazione gettati dentro. Penso solo che questa sia una cosa così importante che più risposte per aiutare le persone su questo forum sono le migliori.

Answer 1

È necessario creare comune astratta stato ui-router e impostare le impostazioni di lingua là:

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

e dopo il vostro stato di home sarebbe bambino da comune:

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

ora è possibile impostare cambio lingua in caso di cambio stato:

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

[19.04.2016] Dichiaro che Google non è ancora in grado di analizzare la tua applicazione web in modo intelligente. questione connessa - SEO: How does Google index Angular applications 2016

Così ho nonché @shershen vi consiglio di usare prerender.io servizio per una migliore SEO.