多语言应用程序中的Angular JS路由不起作用 [英] Angular JS routing in multilanguage app is not working

问题描述

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

I'm trying to implement a multilanguage app. i need to access the requested language by adding a two letter iso parameter to the URL before the controller name. for example: 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'
      });

我现在正在使用基本的状态提供程序进行路由.知道如何更改此设置以使此功能正常工作吗?

i'm using a basic stateprovider for routing right now. any idea how to change this to get this feature working?

先谢谢您

更新

对于任何有相同问题的人，我的解决方案是:

For anyone having the same problem, my solution was:

将每种状态更改为以下状态

changed each state to the following

 .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.

i save the value of the $stateParams lang into a cookie so you can access it through the app.run() and pass it to my translationService since the $stateParams is not initialized yet there.

通过这种方式，您的应用只能与html5mode = false一起使用.这意味着您将始终在URL中看到一个丑陋的标签( http://path/#/ {lang}/{ controllername}并为了解决这个问题，我以这种方式配置了$ locationProvider:

this way your app will work only with html5mode=false. which means you will always see an ugly hashtag in the URL (http://path/#/{lang}/{controllername} andto solve this, i configured the $locationProvider this way:

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

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

and set the base url of the site by inserting inside the tag of your index.html file this line:

 <base href="/">

谢谢

推荐答案

将语言代码添加为url参数

Add the language code as a url parameter

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

然后在您的控制器中，使用$stateParams

And in your controller, get langcode value using $stateParams

$scope.language = $stateParams.langcode;

这篇关于多语言应用程序中的Angular JS路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！