How to make nested views?

Question

Angular

Good day. There are 2 ui-views. One of which is nested.
Can you please tell me how to correctly write .state in order to work correctly only with ui-view="nested"? Thanks

<div data-ui-view="main" id="page-container">
            <!-- Side Overlay-->
            <aside ></aside>

            <!-- Sidebar -->
            <nav ></nav>
            <!-- Header -->
            <header ></header>

            <!-- Main Container -->
            <main id="main-container" data-autoscroll="true" data-ui-view="nested"></main>
            <!-- Footer -->
            <footer></footer>
        </div>

Answer 1

views: {
  '@nested': {
    templateUrl: 'nested-view.html'
  }
}

If the state is nested more than one level, then you need to specify the name of the state that nested belongs to directly. Suppose we have a hierarchy
rootState
-- childrenState1 - on this state there is a template with ui-view="nested"
---- childrenState2
------ childrenState3 - on this state we want to declare in ui-view="nested" insert something on childrenState1

views: {
  '[email protected]': {
    templateUrl: 'nested-view.html'
  }
}