Angular UI Router: разные состояния с одинаковым URL-адресом?

Целевая страница моего приложения имеет два состояния: home-public, home-logged-in. Теперь я хочу показать оба состояния по одному и тому же URL-адресу, но пусть контроллер и шаблон зависят от сеанса пользователя (является ли пользователь зарегистрирован или нет?).

Есть ли способ достичь этого?

Ответ 1

У вас может быть базовое состояние, которое контролирует, какое состояние загружаться, и вы можете просто указать, что у ребенка, указанного в этом базовом состоянии, нет URL-адресов:

.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) {
     ...........
  }
})

Теперь в контроллере вашего базового состояния (home) вы можете проверить, вошел ли пользователь в систему или нет, и используйте $state.go() для загрузки соответствующего состояния.

ИЗМЕНИТЬ

Как и было обещано, рабочая панель.

Ответ 2

Я не уверен, что два состояния могут иметь одинаковый url. То, что я могу думать, может быть жизнеспособным вариантом было бы определить одно состояние

$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';
  }
})

Я не пробовал, но он должен работать.