Javascript 基于AngularJS中的登录状态，使用不同模板的相同url（'；/'；）

我想知道最佳实践，如何在AngularJS中设置路由和模板，向访问者显示不同的前台和登录区域，然后在相同的基本url（“/”）上向登录用户显示仪表板

这两个页面在结构上完全不同，也需要不同的资产

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

还是最好在主体标签之间创建一个没有任何内容的“空”布局，将不同的模板加载到该布局中，并为前端部分和dasboard部分单独布线

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

---

我花了一下午的时间在谷歌上搜索，但找不到任何关于这方面的指南。任何关于如何在AngularJS中进行这种分离的想法都是非常受欢迎的。

您可以使用相同的主模板，包括不同的部分，具体取决于用户是否登录

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

---

马丁的答案很好，但我宁愿用以下方法来解决问题：

创建三种状态：

root

、

dashboard

和

landing

使用

根目录

状态捕获URL，并根据授权状态重定向到

仪表板

或

登录

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

angular
.module（“应用程序”、[“ui.router”]）
.value（“用户”{
姓名：“鲍勃”，
id:1，
洛格丁：是的
})
.config（函数（$stateProvider）{
$stateProvider
.state（“根”{
url:“”，
模板：“”，
控制器：函数（$state，user）{
if（$state.is（“root”））$state.go（user.loggedIn？“仪表板”）：“landing”）；
}
})
.州（“登陆”{
templateUrl:“landing.html”，
控制器：“着陆控制”
})
.state（“仪表板”{
templateUrl:“dashboard.html”，
控制器：“仪表板控制”
});
})
.controller（“DashboardCtrl”，函数（$scope，user，$state）{
$scope.logout=函数（）{
user.loggedIn=false；
$state.go（“根”）；
}
})
.controller（“LandingCtrl”，函数（$scope，user，$state）{
$scope.login=函数（）{
user.loggedIn=true；
$state.go（“根”）；
}
})

---

.

太好了，这很有道理。非常感谢。并且应该从控制器设置loggedIn布尔值，如

$scope.loggedIn

=true；是吗？这是一种非常酷和优雅的方式正是我需要的。非常感谢！：）@Klaster_1您将如何分离平台和仪表板区域的资产？您在谈论什么类型的资产？静态图像、样式、自定义指令？@Klaster_1这真的很酷。我对做一些类似的事情很感兴趣，但是在

location.hostname

上加上大小写而不是登录状态。这似乎真的可行。基本上是一个应用程序，它提供不同的功能，这取决于你从哪个域加载它。