相同的URL（'/'）与根据AngularJS登录状态不同的模板 [英] same url ('/') with different templates based on login status in AngularJS

问题描述

我想知道的最佳实践，如何设置在AngularJS路由和模板来展现不同的正面和放大器;登录区的游客，然后显示仪表板登录的用户在同一个基本URL（'/').

I'd like to know the best practice, how to set up routing and templates in AngularJS to show a different front & login area to visitors, and then show a dashboard to logged in users on the same base url ('/').

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

The two pages are structurally completely different, and also different assets are needed.

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

Is it better to setup two different apps for the 2 parts of the website, but then how would I manage the session between the 2?

或者是更好地使一个空的布局与虚无之间，身体标记的负载不同的模板成，并作出独立的路由的前部和dasboard一部分？

Or is it better to make an "empty" layout with nothing between the body tags an load the different templates into that, and make separate routing for the front part and the dasboard part?

我在寻找一种像Facebook的登录是用的方式。要在登录后留在根域。

I'm looking for kind of like the way Facebook's login is made. To stay on the root domain after logging in.

我花了我的谷歌搜索下午和SO搜索，但没有找到任何这指南。任何想法，你平时是怎么做这种在AngularJS分离将是非常欢迎的。

I spent my afternoon Googling and searching SO, but couldn't find any guides on this. Any ideas how you usually do this kind of separation in AngularJS would be very welcome.

推荐答案

马丁的回答是不错，但我宁愿解决的 UI路由器模块：

Martin's answer is fine, but I'd rather solve the problem with ui-router module:

1. 创建三种状态：根，仪表和登陆。


2. 捕获URL与根状态，并重定向到仪表或登陆根据授权状态。


3. 仪表和登陆将控制器和 templateUrl 在一个地方与其他应用程序状态一起定义，这是很好的。

1. Create three states: root, dashboard and landing.
2. Capture URL with root state and redirect to dashboard or landing depending on authorization status.
3. dashboard and landing will have controller and templateUrl defined in one place together with other application states, which is nice.

code例如：

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 的完整示例。

这篇关于相同的URL（'/'）与根据AngularJS登录状态不同的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！