angularjs – 使用ui-router和angular-translate本地化URL

前端之家收集整理的这篇文章主要介绍了angularjs – 使用ui-router和angular-translate本地化URL前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用ui-router进行路由和角度翻译。我想要实现的是将所选语言绑定到url,如下所示:
www.mydomain.com/en/
www.mydomain.com/ru/
www.mydomain.com/en/about
www.mydomain.com/ru/about

并将作出相应的回应。

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

谢谢

我使用这些方面的东西:

咖啡脚本

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','$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,fromParams) {
  $translate.use(toParams.locale);
});

请注意,如果您使用angular-translate v1.x,则应使用$ translate.uses而不是$ translate.use。

原文链接:https://www.f2er.com/angularjs/145040.html

猜你在找的Angularjs相关文章