本地化的URL与UI的路由器和角翻译 [英] Localize URL's with ui-router and angular-translate

问题描述

我使用的UI路由器进行路由和角转换为翻译。我想实现的是具有选择的语言绑定到像这样的网址：

I am using ui-router for routing and angular-translate for translations. What i would like to achieve is having the selected language bind to the url like so:

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

和它会作出相应的反应。

and it will respond accordingly.

试图寻找例子，但没有发现任何东西。
如果有人实施了类似的解决方案，我很想听听你是如何做到的。

Tried to look for examples, but did not find anything. If someone implemented similar solution, i would love to hear how you did it.

感谢

推荐答案

我使用这些方针的东西：

I use something along these lines:

的CoffeeScript

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 到您的控制器和访问该区域有：

With this, you can inject $stateParams into your controller and get access to the locale there:

的CoffeeScript

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 事件：

的CoffeeScript

$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);
});

请注意，如果你采用了棱角分明，翻译1.x版，你应该使用 $ translate.uses 而不是 $ translate.use 。

Note that if you're using angular-translate v1.x you should use $translate.uses instead of $translate.use.

这篇关于本地化的URL与UI的路由器和角翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！