Как в AngularJS ui-router сделать вложенные стейты?

Question

[Илья]

Просьба помочь разобраться почему не рендерится core.api.create стейт.
JS:

$stateProvider
    //core
    .state('core', {
        url: '/core',
        templateUrl: './core.html',
        controller: 'MainCtrl'
    })
    .state('core.api', {
        url: '/api',
        views: {
            '': {
                templateUrl: './js/app/core/api/api.html',
                controller: 'ApiListController'
            }
        }
    })
    .state('core.api.create', {
        url: '/create',
        view: {
            '': {
                templateUrl: './js/app/core/api/api_create.html',
                controller: 'ApiCreateController'
            }
        }
    });

HTML:

<div class="page-content">
    <div class="content">
        <ui-view></ui-view>
    </div>
</div>

Отображение стейтов:
core - работает
core.api - работает
core.api.create - отображается view от core.api

Answer 1

[Никита Гущин]

Скорей всего у Вас ошибка в шаблоне для core.api . В документации к uiRouter сказано, что:

//Relatively targets the unnamed view in this state's parent state <div ui-view/>
"" : { ... }

То есть вьюха с пустым названием загружается во вьюху без названия родителя. А если у Вас в шаблоне родителя нету такой вьюхи (а, судя по Вашему описанию - ее нету), то она никуда и не грузится.

Может быть вам подойдет такой вариант для core.api.create:

// absolutely targets the unnamed view in root unnamed state.
// <div ui-view/> 
"@" : { ... }

Либо добавьте <div ui-view/> в шаблон core.api
И если Вы используете только unnamed views, то можно проще делать - указывать templateUrl как у Вас в core state

Comments

[Илья]

Спасибо, указал для core.api и core.api.create как у core.

Answer 2

[ingwar4ik]

Была такая же проблема с стейтами решил именовать так:
core.api_create