多语言应用程序中的Angular JS路由不起作用

Angular JS routing in multilanguage app is not working

本文关键字：JS 路由 不起作用 Angular 语言 应用程序      更新时间：2024-01-25

我正在尝试实现一个多语言应用程序。我需要通过在控制器名称之前的URL中添加一个两个字母的iso参数来访问所请求的语言。例如：http://appPath/en/homehttp://appPath/fr/homehttp://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文件的标签中插入以下行来设置网站的基本url：

 <base href="/">

感谢

添加语言代码作为url参数

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

在控制器中，使用$stateParams 获取langcode值

$scope.language = $stateParams.langcode;
相关文章：