Javascript 根据语言重新路由到不同的子视图_Javascript_Angularjs_Module_Routes

Javascript 根据语言重新路由到不同的子视图

javascript angularjs module routes

Javascript 根据语言重新路由到不同的子视图,javascript,angularjs,module,routes,Javascript,Angularjs,Module,Routes,我用angular.js编写了一个应用程序，并尝试根据它们登陆的页面加载不同的子视图。具体来说，当用户登陆英文版本时，将加载部分视图，当用户登陆法文版本时，将加载不同的视图。但是，无论我在代码中没有看到什么，都会使子视图始终位于ELSE（或“/”）路径上。这是我的appRoutes.js文件中的当前代码 angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routePro

我用angular.js编写了一个应用程序，并尝试根据它们登陆的页面加载不同的子视图。具体来说，当用户登陆英文版本时，将加载部分视图，当用户登陆法文版本时，将加载不同的视图。但是，无论我在代码中没有看到什么，都会使子视图始终位于ELSE（或“/”）路径上。这是我的appRoutes.js文件中的当前代码

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

var homeLang = document.documentElement.getAttribute('lang');
var english = 'en';

var homeView = function (homeLang) {

    if (homeLang === english) {
         homeView = '/';
         return homeView;
        } else {

        homeView = '/accueil';
        return homeView;
    }
};

$routeProvider

    // client routes

    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'MainController'
    })

    .when('/web', {
        templateUrl: 'views/web.html',
        controller: 'MainController'
    })

    .when('/design', {
        templateUrl: 'views/design.html',
        controller: 'MainController'
    })

    .when('/hosting', {
        templateUrl: 'views/hosting.html',
        controller: 'MainController'
    })

    .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'MainController'
    })

    .when('/accueil', {
        templateUrl: 'views/accueil.html',
        controller: 'MainController'
    })

    .when('/sites', {
        templateUrl: 'views/sites.html',
        controller: 'MainController'
    })

    .when('/services', {
        templateUrl: 'views/services.html',
        controller: 'MainController'
    })

    .when('/hebergement', {
        templateUrl: 'views/hebergement.html',
        controller: 'MainController'
    })

    .when('/contactez', {
        templateUrl: 'views/contactez.html',
        controller: 'MainController'
    })

    .otherwise({ redirectTo: homeView });

$locationProvider.html5Mode(true);

}]);

下面是加载不同视图的HTML

<body ng-app="myApp">
<div class="navbar-wrapper">
<div class="container">
  <div role="navigation" class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      </div>
      <div class="navbar-collapse collapse">
        <div class="nav navbar-nav">
          <li><a href="/accueil">Accueil</a></li>
          <li><a href="/sites">Sites & Apps</a></li>
          <li><a href="/services">Design</a></li>
          <li><a href="/hebergement">Hébergement</a></li>
          <li><a href="/contactez">Contact</a></li>
        </div>
      </div></div></div></div></div>
 <section class="content">
<div ng-view></div></section></body>


切换导航

在您的视图中，您可以根据语言加载不同的模板，而无需更改路由。例如，在routed视图中

然后，您还可以在每个跨度之前添加一个ng if来检查语言值。

我实际上回到了代码中，使用了ui路由器，并使用构建块（多个视图）创建了状态，它解决了我所有的问题！！：）

抱歉，代码被删除了-我写了，我通常会这样做，但在我的HTML文件中，我有ng视图加载其他页面后。我上面代码中的一些路由属于法语版本，另一些属于英语版本。加载时是否可以在ng视图中设置默认视图？然后，当我们点击导航时，它会加载不同的视图。我在上面添加了HTML。当你第一次登录时，我猜你是在“/”上，这意味着你的默认路由。当（“/”，{templateUrl:'views/home.HTML'，controller:'MainController}）是的，所以我需要默认“/”当菜单是英文版本时，但当菜单是法文版本时，我需要默认为“/acueil”…这就是我用我的有条件的。条件似乎有效，但是homeLang的值似乎不是在我的appRoute.js文件中获取的，因此总是默认为“/acueil”。只是为了可视化我的结构：language selection（常规html）-to-angular应用程序，其中菜单使用的是选择语言，但我认为子视图的默认设置不正确（除非我是法国人）。请分享你的解决方案。我也需要它。我想不出来