当前位置: 首页 > 面试题库 >

使用ui-router本地化URL并进行angular-translate

钱钊
2023-03-14
问题内容

我正在使用ui-router进行路由选择,并使用angular-translate进行翻译。我想实现的是将所选语言绑定到url,如下所示:

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

它将做出相应的响应。

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

谢谢


问题答案:

我使用以下方式:

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控制器并访问那里的语言环境:

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

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



 类似资料:
  • 本文向大家介绍angular-ui-router 基本观点,包括了angular-ui-router 基本观点的使用技巧和注意事项,需要的朋友参考一下 示例 index.html script.js            

  • 问题内容: 我正在使用angular-ui-router库,URL出现问题。 我有以下代码: app.js: index.html: 这行得通,但是当我从标记中删除“#”时,此行不通。 如何从网址中删除“#”符号? 问题答案: 如果要导航而不使用哈希标签,则需要启用HTML5Mode: 您还需要通过将以下代码添加到HTML文件的来告诉angular应用的根URL : 请注意,对HTML5模式的支持

  • 问题内容: 我的应用程序的登录页面有两种状态:,。现在,我想在同一URL上显示这两种状态,但让控制器和模板取决于用户会话(用户是否登录?)。 有没有办法做到这一点? 问题答案: 您可以有一个基本状态来控制要加载的状态,并且可以简单地让声明该基本状态的子级没有url: 现在,在基本状态()的控制器中,您可以检查用户是否已登录,并用于加载适当的状态。 编辑 如所承诺的那样,正在努力工作。

  • 本文向大家介绍angular-ui-router 页码参数,包括了angular-ui-router 页码参数的使用技巧和注意事项,需要的朋友参考一下 示例 类似于,int但仅接受正整数(当有page参数时,可用于分页。 定义: 并使用: 柱塞和相关的答案。

  • 问题内容: 我正在使用角度UI路由器。我的路线配置中包含以下内容 在索引页面中,我只是使用以下方法调用视图: 在我的bulletinBoard.html中,我想要一个嵌套视图: 对于/ newsFeed页面和/ tradeFeed页面,它可以正常工作,但是对于公告板,我看不到页面上的任何内容。我要去哪里错了? 问题答案: 我发现官方GitHub Wiki上的示例非常不直观。这是一个更好的选择: h

  • 问题内容: 以故事形式: 我在这里寻找的是主从设置。母版是列表形式的,当我单击一个链接(相对于特定的行/记录(在这种情况下为Account))时,我想在主视图(直译为“主”视图:)中查看详细信息。 我想这样做并维护我的URL结构(用于帐户列表;用于详细版本), 但是我希望详细视图使用列表正在使用的视图 。 我目前有什么 index.html account.js 此时,该路线将按预期工作。它在视图