stesso URL ('/') con diversi modelli in base allo stato di accesso in AngularJS

Question

Vorrei conoscere la procedura migliore, come configurare il routing e i modelli in AngularJS per mostrare un'area di accesso anteriore diversa ai & ai visitatori e quindi mostra una dashboard per gli utenti registrati sullo stesso url di base ('/').

Le due pagine sono strutturalmente del tutto diverso, e anche sono necessarie diverse attività.

meglio impostare E 'due applicazioni diverse per le 2 parti del sito, ma poi come faccio a gestire la sessione tra il 2?

Oppure è meglio creare un layout "vuoto" senza nulla tra i tag del corpo e caricare i diversi modelli in quello e effettuare il routing separato per la parte anteriore e la parte del dasboard?

Sto cercando un po 'come il modo di login di Facebook è fatto. Per rimanere sul dominio principale dopo l'accesso.

ho trascorso la mia pomeriggio Googling e la ricerca SO, ma non ho trovato alcuna guida su questo. Qualsiasi idea su come si fa in genere questo tipo di separazione in AngularJS sarebbe molto gradita.

Answer 1

risposta di Martin va bene, ma preferirei risolvere il problema con ui-router module:

1. Creare tre stati: root, dashboard e landing.
2. URL di acquisizione con stato root e reindirizzamento a dashboard o landing a seconda dello stato di autorizzazione.
3. dashboard e landing avranno controller e templateUrl definiti in un unico luogo insieme ad altri stati dell'applicazione, il che è bello.

esempio di codice:

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

È possibile utilizzare lo stesso modello principale, comprendono diversi parziali a seconda se l'utente è connesso o meno.

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