How to make nested states in AngularJS ui-router?

Question

JavaScript

Please help me figure out why the core.api.create state is not rendered.
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>

State display:
core -
core.api works - core.api.create works
- view from core.api is displayed

Answer 1

Most likely you have an error in the template for core.api . The documentation for uiRouter says that:

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

That is, a view with an empty name is loaded into a view without a parent name. And if you do not have such a view in the parent template (and, judging by your description, there is none), then it will not be loaded anywhere.
Maybe this option for core.api.create will suit you:

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

Or add <div ui-view /> to the core.api template
And if you use only unnamed views, then you can do it easier - specify the templateUrl as you have in the core state

Answer 2

I had the same problem with the states, I decided to call them like this:
core.api_create