web-dev-qa-db-ja.com

どうすればangular-translateとangular-ui-routerを使用して言語を動的に切り替えることができますか？

私のアプリケーションは、angular-translate、angular-ui-router、およびテンプレートを使用しています。 index.htmlを除くアプリケーションのhtmlページはテンプレートにパックされ、S3がサポートするAmazonCloudFrontから提供されます。私がやりたいのは、ドメイン名の後の2文字のコードに応じて言語を動的に切り替える方法を見つけ、可能であればユーザーロケールを取得して、それをデフォルトの切り替えに使用することです。

私がこれをしたい理由は、Googleが以下のようにアドレスに国コードを入力することを推奨していることを読んだので、SEOの目的のためです。

これが私がこれまでに持っているものです：

ルーターファイル

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

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

どういうわけか私はそれを作りたいので、検索エンジンが選択したとき：

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

そのangularルーターは、webapi.htmlファイルを提供する前に適切な言語ファイルに切り替えます。

私がこれをどのように行うことができるかについての提案は大歓迎です。理想的には、私やコミュニティの他の人が必要なことを行うのに役立つ言語ファイルスイッチャーを使用した簡単な例を見たいと思います。

そこに別の同様の質問があることに注意してください：

i-routerとangular-translateを使用してURLをローカライズする

そこにある答えは良いですが、この質問を開くことで、おそらくいくつかの国際化SEOのヒントが投入されて、さらに良く、より更新された答えが得られることを願っています。これは非常に重要なことであり、より多くの答えが得られると思います。このフォーラムの人々をより良く助けるために。

angularjsangular-ui-routerangular-translate
22
Alan2

共通の抽象UIルーター状態を作成し、そこで言語設定をセットアップする必要があります。

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

そして、あなたのhome状態が共通の子になった後：

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

これで、状態変更イベントで言語スイッチを設定できます。

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

[19.04.2016]Googleはまだあなたのウェブアプリケーションを巧妙な方法で解析できないことを宣言します。関連する質問- SEO：GoogleインデックスはどのようにAngularアプリケーション2016

だから私も@ shershenより良いSEOのために prerender.io サービスを使うことをお勧めします。

10
Stepan Suvorov