基於AngularJS中登錄狀態的不同模板的相同url（'/'）

我想知道最佳實踐，如何在AngularJS中設置路由和模板以向訪問者顯示不同的前端&登錄區域，以及然後顯示一個儀表板以在相同的基本URL（'/'）上登錄用戶。基於AngularJS中登錄狀態的不同模板的相同url（'/'）

這兩頁在結構上完全不同，並且還需要不同的資產。

爲網站的2個部分設置兩個不同的應用程序會更好嗎，但是如何管理2之間的會話呢？

或者是更好地做一個「空」佈局與身體標籤之間沒有什麼加載不同的模板，併爲前部和dasboard部分單獨路由？

我正在尋找有點像Facebook的登錄方式。登錄後繼續留在根域中。

我花了我的下午時間搜索並搜索到了，但是找不到任何指南。任何想法，你通常會在AngularJS中做這種分離，這是非常受歡迎的。

來源

2014-09-05 Jack Gerson

馬丁的回答是不錯，但我寧願ui-router module解決的問題：

創建三種狀態：root，dashboard和landing。
根據授權狀態，捕獲URL爲root狀態，並重定向到dashboard或landing。
dashboard和landing將有controller和templateUrl與其他應用程序狀態一起定義在一個地方，這很好。

代碼例如：

angular 
    .module("app", ["ui.router"]) 
    .value("user", { 
    name: "Bob", 
    id: 1, 
    loggedIn: true 
    }) 
    .config(function($stateProvider) { 
    $stateProvider 
     .state("root", { 
     url: "", 
     template: "<section ui-view></section>", 
     controller: function($state, user) { 
      if ($state.is("root")) $state.go(user.loggedIn ? "dashboard" : "landing"); 
     } 
     }) 
     .state("landing", { 
     templateUrl: "landing.html", 
     controller: "LandingCtrl" 
     }) 
     .state("dashboard", { 
     templateUrl: "dashboard.html", 
     controller: "DashboardCtrl" 
     }); 
    }) 
    .controller("DashboardCtrl", function($scope, user, $state) { 
    $scope.logout = function() { 
     user.loggedIn = false; 
     $state.go("root"); 
    } 
    }) 
    .controller("LandingCtrl", function($scope, user, $state) { 
    $scope.login = function() { 
     user.loggedIn = true; 
     $state.go("root"); 
    } 
    })

Complete example on Plunker。

來源

2014-09-05 16:29:47

這是非常酷和優雅的方式來做到這一點！ :)正是我需要的。非常感謝！ :) – 2014-09-06 05:07:51

爲Plunker鏈接+1！ – orszaczky 2014-09-06 05:31:11

@ Klaster_1您將如何分離着陸和儀表板區域的資產？ – 2014-09-06 05:44:26

您可以使用相同的主模板，根據用戶是否登錄來包含不同的部分。

<ng-include=" 'views/loggedout.html' " ng-if="!loggedIn"></ng-include> 
<ng-include=" 'views/loggedin.html' " ng-if="loggedIn"></ng-include>

來源

2014-09-05 14:34:30 Martin

太棒了，這是有道理的。謝謝。並且應該像控制器一樣設置loggedIn布爾值，比如'$ scope.loggedIn' = true;對？ – 2014-09-05 15:10:35

基於AngularJS中登錄狀態的不同模板的相同url（'/'）

回答

相關問題