Angularjs-不知道如何从具有不同视图的登录页面重定向到主页_Angularjs_Redirect_Ng View

Angularjs-不知道如何从具有不同视图的登录页面重定向到主页

angularjs redirect

Angularjs-不知道如何从具有不同视图的登录页面重定向到主页,angularjs,redirect,ng-view,Angularjs,Redirect,Ng View,我正在一个AngularJs项目中工作，我有一个登录页面和主页（所有其他页面将使用相同的主页视图）。现在我需要将用户从登录页面（不同的布局）重定向到主页（另一个不同的布局）现在我有一个包含ng app和ng view标签的索引页面，我的登录页面将在该页面上呈现，但成功登录后，我不知道如何显示不同的布局视图（主页）此外，我还看到许多人说，可以使用ng if隐藏/显示所需的部分（该部分放在同一页面中）。因此，我尝试在登录前后使用rootScope变量来显示/隐藏span/div&我工作得很好。但

我正在一个AngularJs项目中工作，我有一个登录页面和主页（所有其他页面将使用相同的主页视图）。现在我需要将用户从登录页面（不同的布局）重定向到主页（另一个不同的布局）

现在我有一个包含ng app和ng view标签的索引页面，我的登录页面将在该页面上呈现，但成功登录后，我不知道如何显示不同的布局视图（主页）

此外，我还看到许多人说，可以使用ng if隐藏/显示所需的部分（该部分放在同一页面中）。因此，我尝试在登录前后使用rootScope变量来显示/隐藏span/div&我工作得很好。但我在这个方法中注意到的一件事是，当我加载登录页面时，我能够看到侧栏、顶栏和底部面板几秒钟，但它们最终变得不可见，看起来很凌乱

My app.js:

 $stateProvider
        .state('login', {
            url: "/login",
            templateUrl: "/app/views/login/login.html",
            controller: "loginController"
        })
      .state('home', {
          url: "/home",
          templateUrl: "/app/views/home/home.html",
          controller: "homeController"
      })

<html data-ng-app="myApp">
   <body>
       <div class="sidebar" id="sidebar" ng-if="isLoginSuccessful">
       </div>
       <div class="topbar" id="topbar" ng-if="isLoginSuccessful">
       </div>
       <div class="contentpanel" id="contentpanel">
           <div ng-view>
                <!-- view goes here-->
           </div>
       </div>
       <div class="bottompanel" id="bottompanel" ng-if="isLoginSuccessful">
       </div>       
   </body>
</html>

myApp.controller('loginController', ["$scope", "$rootScope", "$location", function ($scope, $rootScope, $location) {       
    $rootScope.loggedIn = false;
    $scope.login = function () {      
        //do user validation check here
        $rootScope.loggedIn = true;
        $location.path("/home"); //redirect to home page        
    }
}]);

我的登录页面：非常简单的页面-只包含两个文本框和一个按钮。单击登录按钮时，将调用loginController的登录方法

我的主页：非常复杂的页面-包含侧面板、顶部面板、中心面板（所有其他视图都将显示在其中）和底部面板

我尝试在索引页面中使用rootScope变量（称为isloginsucessful）显示/隐藏登录和主页

我的索引页：

 $stateProvider
        .state('login', {
            url: "/login",
            templateUrl: "/app/views/login/login.html",
            controller: "loginController"
        })
      .state('home', {
          url: "/home",
          templateUrl: "/app/views/home/home.html",
          controller: "homeController"
      })

<html data-ng-app="myApp">
   <body>
       <div class="sidebar" id="sidebar" ng-if="isLoginSuccessful">
       </div>
       <div class="topbar" id="topbar" ng-if="isLoginSuccessful">
       </div>
       <div class="contentpanel" id="contentpanel">
           <div ng-view>
                <!-- view goes here-->
           </div>
       </div>
       <div class="bottompanel" id="bottompanel" ng-if="isLoginSuccessful">
       </div>       
   </body>
</html>

myApp.controller('loginController', ["$scope", "$rootScope", "$location", function ($scope, $rootScope, $location) {       
    $rootScope.loggedIn = false;
    $scope.login = function () {      
        //do user validation check here
        $rootScope.loggedIn = true;
        $location.path("/home"); //redirect to home page        
    }
}]);

有没有更好的方法来处理这个问题。请帮帮我

提前感谢。

最好的方法是使用Angular UI路由器。看看这里

编辑： 它应该在以下方面发挥作用： app.js

$stateProvider
      .state('login', {
          url: "/login",
          views: {
              "content@": {
                  templateUrl: "/app/views/login/login.html",
                  controller: "loginController"
              }
          }
      })
      .state('home', {
          url: "/home",
          views: {
                "sidebar@": {
                    templateUrl: "/app/views/home/sidebar.html",
                    controller: "sidebarController"
                },
                "topbar@": {
                    templateUrl: "/app/views/home/topbar.html",
                    controller: "topbarController"
                },
                "content@": {
                    templateUrl: "/app/views/home/home.html",
                    controller: "homeController"
                }
                "bottompanel@": {
                    templateUrl: "/app/views/home/bottompanel.html",
                    controller: "bottompanelController"
                }
          }
      })

myApp.controller('loginController', ["$scope", "$rootScope", "$state", 
  function ($scope, $rootScope, $state) {       
    $rootScope.loggedIn = false;
    $scope.login = function () {      
        //do user validation check here
        $rootScope.loggedIn = true;
        $state.go("home"); //redirect to home page        
    }
}]);

index.html

<html data-ng-app="myApp">
   <body>
       <div class="contentpanel" id="contentpanel">
           <div ui-view="sidebar"></div>
           <div ui-view="topbar"></div>
           <div ui-view="content"></div>
           <div ui-view="bottompanel"></div>
       </div>       
   </body>
</html>

您询问登录后如何从登录页面导航到主页？您的逻辑几乎就在控制器中，并且您已经设置了状态，因此可以这样更改它：

myApp.controller('loginController', ["$scope", "$rootScope", "$state", function ($scope, $rootScope, $state) {       
  $rootScope.loggedIn = false;
  $scope.login = function () {      
    //do user validation check here
    $rootScope.loggedIn = true;
    $state.go('home'); //redirect to home page        
  }
}]);

由于模板包含您需要的所有内容，您可以去掉ng if属性，因为它们导航到主页的唯一方式是通过登录（以及$state.go（））

您能告诉我如何在我的场景中实现这一点吗？我见过很多ui路由器的例子，但没有一个适合我的需要。