Question

我想知道最佳实践，如何在AngularJS中设置路由和模板以显示不同的前端和后端。访问者的登录区域，然后在同一个基本URL（'/'）上显示登录用户的仪表板。

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

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

或者更好的做法是在主体标签之间没有任何内容的“空”布局，将不同的模板加载到其中，并为前部和死板部分制作单独的布线？

我正在寻找类似Facebook登录的方式。登录后保持在根域。

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

Answer 1

马丁的回答很好，但我宁愿用ui-router module解决问题：

创建三种状态：root，dashboard和landing。
使用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

Answer 2

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

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

相同的网址（＆＃39; /＆＃39;）根据AngularJS中的登录状态使用不同的模板

2 个答案: