Jak mogę dynamicznie przełączać języki za pomocą translatora kątowego i kątowego?

Question

Moja aplikacja używa kątowego-translate, kątowego-routera i szablonów. Strony HTML aplikacji z wyjątkiem pliku index.html są spakowane do szablonów i obsługiwane przez Amazon CloudFront wspierane przez S3. Chciałbym znaleźć sposób na dynamiczne przełączanie języka w zależności od dwuliterowego kodu po nazwie domeny, a także, jeśli to możliwe, odbiór lokalnego ustawienia użytkownika i użycie go do domyślnego przełączania.

Powodem, dla którego chciałbym to zrobić, jest SEO, ponieważ przeczytałem, że Google zaleca umieszczenie kodu kraju pod adresem, jak poniżej.

Oto co mam do tej pory:

Plik Router

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

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

Jakoś chciałbym zrobić to tak, że kiedy wyszukiwarka wybierze:

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

To kanciasty routera przełącza się do odpowiedniego pliku językowego przed udostępnieniem pliku webapi.html.

Wszelkie sugestie, w jaki sposób mogę to zrobić, będą mile widziane. Idealnie chciałbym zobaczyć prosty przykład z przełącznikiem plików językowych, który pomógłby mnie i innym osobom w społeczności robić to, co jest potrzebne.

Należy pamiętać, że jest inny podobny pytanie tam:

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

odpowiedzi są dobre, ale mam również nadzieję, że dzięki otwarciu na to pytanie mogę uzyskać jeszcze lepsze i bardziej aktualne odpowiedzi, być może z pewnymi wytycznymi internacjonalizacji SEO. Myślę, że to jest tak ważna rzecz, że im więcej odpowiedzi, tym lepiej dla ludzi na tym forum.

Answer 1

Musisz utworzyć wspólny abstrakcyjny stan ui-routera i konfiguracji ustawień językowych tam:

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

i po stan home byłoby dziecko od wspólnego:

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

teraz można skonfigurować zmiana języka przy zmianie stanu zdarzenia:

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

[19.04.2016] Oświadczam, że Google nadal nie jest w stanie sparsować Twojej aplikacji internetowej w sprytny sposób. Podobne pytanie - SEO: How does Google index Angular applications 2016

Więc jak @shershen Polecam używać prerender.io usługi dla lepszej SEO.