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

#angularjs #angular-ui-router

Вопрос:

Я пытаюсь настроить свое приложение на работу с 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>

two-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-адрес тот же, но он работает нормально.

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

РЕДАКТИРОВАТЬ: похоже, основной проблемой был отсутствующий пустой URL

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

Ответ №1:

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

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

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

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

Ответ №2:

Измените его следующим образом,

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