пустой страницы ввода приложения

Question

Я пытаюсь установить мое приложение для работы с 2-х раскладками (один без боковых панелей, одна с 2-х боковыми панелями), это мое решение:

$stateProvider 
      .state('main', { 
       url: "/", 
       abstract:true, 
       templateUrl: "/layouts/main.html" 
      }) 
      .state('sidebars', { 
       url: "/", 
       abstract:true, 
       templateUrl: "/layouts/two-sidebar.html" 
      }) 
      .state('home', { 
       parent:'main', 
       templateUrl: "/partials/home.html" 
      }) 
      .state('about', { 
       url: "about", 
       parent:'sidebars', 
       templateUrl: "/partials/about.html" 
      }) 

main.html

<div class="container"> 
    <div ui-view class="view"/> 
</div> 

два-sidebar.html

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2">leftcontent</div> 
     <div class="col-md-8"> 
      <div ui-view class="view"></div> 
     </div> 
     <div class="col-md-2">rightcontent</div> 
    </div> 
</div> 

Я уверен, что есть лучшие решения, но при этом все прекрасно работает. Единственная проблема - когда я нахожусь на корневой странице /#/ при первом запуске пустой страницы, когда я нажимаю на home, URL-адрес тот же, но он отлично работает.

Чтобы быть более ясным, здесь plunker, чтобы увидеть эту проблему, вы должны открыть его во внешнем окне (синяя кнопка в окне предварительного просмотра): http://plnkr.co/edit/Q4cZM69hn0lutYEYjmxH?p=preview

EDIT: Похоже, что основные проблема была отсутствует пустой URL

.state('home', { 
       url:"", 
       parent:'main', 
       templateUrl: "/partials/home.html" 
      }) 

Answer 1

Вы определили два состояния, связанные с тем же URL (/).

Согласно дизайну UI Router, только одно состояние должно быть привязано к URL-адресу.

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

.state('main', { 
      url: "/", 
      abstract:true, 
      templateUrl: "/layouts/main.html" 
     }) 
     .state('main.sidebars', { 
      url: "", 
      templateUrl: "/layouts/two-sidebar.html" 
     }) 

Answer 2

Изменить это так,

.state('main', { 
      url: "/", 
      abstract:true, 
      templateUrl: "/layouts/main.html" 
     }) 
.state('sidebars', { 
      url: "/something", 
      abstract:true, 
      templateUrl: "/layouts/two-sidebar.html" 
     })