Angularjs - リダイレクトする方法がわからない、別のビューを持つログインページから

私はログインページとホームページを持つAngularJsプロジェクトに取り組んでいます（他のすべてのページは同じホームページビューを使用します）。これで、ユーザーをログインページ（別のレイアウト）からホームページ（別のレイアウト）にリダイレクトする必要があります。Angularjs - リダイレクトする方法がわからない、別のビューを持つログインページから

現在、私はng-app & ng-viewタグを含んでいるインデックスページを持っています。ログインページはレンダリングされていますが、ログインが成功した後、私は別のレイアウトビュー）。

また、ng-ifを使用して必要な部分（同じページ自体に配置されている）を表示/非表示することができると多くの人が話しています。ですから、私はrootscope変数を使って、ログイン前後にspan/divを表示/非表示にしました。&私はうまくいきました。しかし、私がこの方法で気づいたことは、ログインページをロードすると、サイドバー、トップバー&ボトムパネルを数秒間見ることができましたが、最終的に見えなくなり、見た目が乱雑になります。

マイ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" 
     })

マイログインページ：非常にシンプルなページが - ちょうど2つのテキストボックスとボタンが含まれています。ログインボタンをクリックすると、loginControllerのログインメソッドが呼び出されます。

私のホームページ：非常に複雑なページ - サイドパネル、トップパネル、センターパネル（他のすべてのビューが表示される）、および下部パネルが含まれています。

私が試してみましたNG-場合（isLoginSuccessfulと呼ばれる）rootScope変数を使用して表示/非ログインおよびホーム・ページを表示するにはインデックスページで

私のインデックスページ：

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

マイloginController .js：

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   
    } 
}]);

これを処理する方法はありますか？私を助けてください。

ありがとうございます。

出典

2016-03-21 user972255

最良の方法は、角度UIルーターを使用することです。

ここhttps://angular-ui.github.io/ui-router/を見てみましょうEDIT： それが動作するはずです： app.js

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

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>

loginController.js

を

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   
    } 
}]);

出典

2016-03-21 23:51:39 olysachok

私のシナリオでそれを実装する方法を教えてもらえますか？私はui-routerの多くの例を見てきましたが、私の必要性に合ったものは何もありません。 – user972255

ログインした後、ログインページからホームページへのナビゲート方法を尋ねましたか？あなたのロジックは、コントローラに近いがあり、そしてあなたは既に設定状態を持っているので、そのようにそれを変える：

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-かの属性から取り除くことができます彼らはホームページに移動する唯一の方法は、ログイン（と$ state.go（）経由）です

出典

2016-03-22 09:20:52 rrd

Angularjs - リダイレクトする方法がわからない、別のビューを持つログインページから

答えて

関連する問題