26

ルーティングには ui-router を使用し、翻訳には angular-translate を使用しています。私が達成したいのは、選択した言語を次のように URL にバインドすることです。

www.mydomain.com/en/
www.mydomain.com/ru/
www.mydomain.com/en/about
www.mydomain.com/ru/about

それに応じて応答します。

例を探してみましたが、何も見つかりませんでした。誰かが同様のソリューションを実装した場合、どのようにそれを行ったかを知りたいです。

ありがとう

4

4 に答える 4

30

私はこれらの行に沿って何かを使用します:

コーヒースクリプト

angular.module('app')
.config([
  '$stateProvider'
  ($stateProvider) ->
    $stateProvider.state 'app',
      abstract: true
      url: '/{locale}'
    $stateProvider.state 'app.root',
      url: ''
    $stateProvider.state 'app.root.about',
      url: '/about'
])

JavaScript

angular.module('app').config([
  '$stateProvider', function($stateProvider) {
    $stateProvider.state('app', {
      abstract: true,
      url: '/{locale}'
    });
    $stateProvider.state('app.root', {
      url: ''
    });
    return $stateProvider.state('app.root.about', {
      url: '/about'
    });
  }
]);

これにより、コントローラーに挿入$stateParamsして、そこでロケールにアクセスできます。

コーヒースクリプト

angular.module('app')
.controller('appCtrl', [
  '$scope', '$stateParams'
  ($scope, $stateParams) ->
    $scope.locale = $stateParams.locale
])

JavaScript

angular.module('app').controller('appCtrl', [
  '$scope', '$stateParams', function($scope, $stateParams) {
    return $scope.locale = $stateParams.locale;
  }
]);

または、ページ全体に自動的に影響を与えたい場合$stateChangeStartは、アプリケーション コントローラーなどでイベントを使用します。

コーヒースクリプト

$scope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) ->
  $translate.use(toParams.locale)

JavaScript

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  $translate.use(toParams.locale);
});

angular-translate v1.x を使用している場合は、$translate.uses代わりに使用する必要があることに注意してください$translate.use。

于 2014-06-18T09:46:06.280 に答える
2

私は正確な問題についてブログ投稿を書きました: http://fadeit.dk/post/angular-translate-ui-router-seo

于 2015-03-31T19:40:35.207 に答える