web-dev-qa-db-de.com

Angular UI-Router: Unterschiedliche Zustände mit derselben URL?

Die Landing Page meiner App hat zwei Zustände: home-public, home-logged-in. Jetzt möchte ich beide Zustände unter derselben URL anzeigen, aber lassen Sie den Controller und die Vorlage von der Benutzersitzung abhängen (ist der Benutzer angemeldet oder nicht?).

Gibt es einen Weg, dies zu erreichen?

29
jvannistelrooy

Sie könnten einen Basisstatus haben, der steuert, welcher Status geladen werden soll, und Sie könnten einfach das untergeordnete Element dieses Basisstatus angeben, der keine URLs hat:

.state('home', {
  url: "/home",
  templateUrl: "....",
  controller: function($scope,$state,authSvc) {
     if(authSvc.userIsLoggedIn()){
          $state.go('home.loggedin')
     }else{
          $state.go('home.public')
     }
  }
})


.state('home.public', {
  url: "",
  templateUrl: "....",
  controller: function($scope) {
     ...........
  }
})

.state('home.loggedin', {
  url: "",
  templateUrl: "....",
  controller: function($scope) {
     ...........
  }
})

Jetzt können Sie im Controller Ihres Basisstatus (home) prüfen, ob der Benutzer angemeldet ist oder nicht, und mit $state.go() einen geeigneten Status laden.

EDIT

Wie versprochen, ein funktionierender Plunk .

51

Ich bin nicht sicher, ob zwei Zustände dieselbe url haben können. Was ich für eine praktikable Option halten kann, wäre die Definition eines einzelnen Staates

$stateProvider.state('home', {
  templateUrl: function (stateParams){
    // Implement a logic that select what view from the server should be returned for logged in user and otherwise
    //return 'templateurl';
  }
})

Ich habe es nicht versucht, aber es sollte funktionieren.

0
Chandermani