基于AngularJS中登录状态的相同URL（'/'）和不同模板

Question

我想了解最佳实践，即如何在AngularJS中设置路由和模板，以向访问者显示不同的前台和登录区域，然后显示仪表板以在相同的基本URL（’/’）上登录用户。

这两页在结构上完全不同，并且还需要不同的资产。

为网站的两个部分设置两个不同的应用程序是否更好，但是我将如何管理这两个部分之间的会话？

还是在主体标签之间没有任何内容的“空”布局将不同的模板加载到其中，并为前部分和仪表板部分进行单独的布线，这更好？

我正在寻找一种类似于Facebook登录的方式。登录后留在根域中。

我度过了一个下午的时间，在Google上搜寻并搜寻了类似内容，但找不到任何相关的指南。非常欢迎您提出通常在AngularJS中进行这种分离的任何想法。

Answer 1

Martin的回答很好，但是我宁愿使用ui-router模块解决问题：

1. 创建三个状态：root，dashboard和landing。
2. 使用root状态捕获URL，然后重定向到授权状态dashboard或landing取决于授权状态。
3. 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");
    }
  })

关于Plunker的完整示例。