How to load different templates in one view using ui-router?

Question

JavaScript

Hello gentlemen.
Let's say there is a navigation block:
<div ui-view="mainNavView"></div>
When changing urls, you need to load different templates into it:

$stateProvider
        .state('notes', {
            url: "/notes",
            views:{
                'mainNavView' : {
                   templateUrl: '/partials/notesGroups.html',
                   controller: 'mainNavCtrl',
                } 
            }
        })
        .state('notes.list',{
            url:'/list/{id}',
            views:{
                'mainNavView' : {
                    templateUrl: '/partials/notesList.html',
                    controller:  'mainNavCtrl',
                }
            }
        })

As far as I understand, when changing urls, templates should be automatically loaded and rendered, but this does not happen.
The inscription "XHR finished loading: GET ".......:8000/partials/notesList.html"." appears in the console, that is, in fact, it is loaded, but not rendered.
Please tell me, maybe I don’t understand something, or I’m doing everything wrong at all?
Thanks in advance.

Answer 1

stackoverflow.com/questions/22175980/angular-ui-ro...

Answer 2

You are trying to use Nested states where they are probably not required.