多语言应用程序中的Angular JS路由无法正常工作

时间:2015-02-19 08:41:45

标签: javascript angularjs angularjs-routing

我正在尝试实施多语言应用。 我需要通过在控制器名称之前的URL中添加一个双字母iso参数来访问所请求的语言。 例如: http://appPath/en/home http://appPath/fr/home http://appPath/ar/home

 $stateProvider
         .state('home', {
             url: '/home',
             templateUrl: baseTemplateUrl + "home.html",
             controller: 'homeController'
         })
        .state('login', {
            url: '/login',
            templateUrl: baseTemplateUrl + "login.html",
            controller: 'loginController'
        })
      .state('customers', {
          url: '/customers',
          templateUrl: baseTemplateUrl + "customers.html",
          controller: 'customersController'
      })
      .state('signup', {
          url: '/signup',
          templateUrl: baseTemplateUrl + "signup.html",
          controller: 'signupController'
      });

我现在正在使用基本的stateprovider进行路由。知道如何更改此功能以使此功能正常工作吗?

提前谢谢你,


更新


对于有同样问题的人,我的解决方案是:

将每个州改为以下

 .state('signup', {
              url: '/:lang/signup',
              templateUrl: baseTemplateUrl + "signup.html",
              controller: 'signupController',
              resolve: {
                  lang: ['$stateParams', function ($stateParams) {
                      document.cookie = "lang=" + $stateParams.lang;
                  }]
              }
          });

我将$ stateParams lang的值保存到cookie中,以便您可以通过app.run()访问它并将其传递给我的translationService,因为$ stateParams尚未在那里初始化。

这样你的应用程序只能用于html5mode = false。这意味着你总会在URL(http://path/#/ {lang} / {controllername}中看到一个丑陋的主题标签并解决这个问题,我用这种方式配置了$ locationProvider:

 $locationProvider.html5Mode(true).hashPrefix('!');

并通过在index.html文件的标记内插入以下行来设置网站的基本网址:

 <base href="/">

由于

1 个答案:

答案 0 :(得分:2)

将语言代码添加为url参数

$stateProvider
     .state('home', {
         url: '/:langcode/home',
         templateUrl: baseTemplateUrl + "home.html",
         controller: 'homeController'
     });

在您的控制器中,使用langcode

获取$stateParams
$scope.language = $stateParams.langcode;