Угловой ui маршрутизатор

Question

Я пробовал простую компоновку, но кажется, что ничего не получается. Layout.html загружается, и это все. В консоли нет ошибок. Это часть моего файла конфигурации

$stateProvider 
     .state('layout', { 
     url: '', 
      abstract: true, 
      templateUrl: viewsRoot + "layout.html", 
      controller: 'LayoutController', 

     }) 
     .state('layout.sidebar', { 
     abstract: true, 
      templateUrl: viewsRoot + "sidebar.html", 
      controller: 'SidebarController' 
     }) 
      .state('layout.mainview', { 
       abstract: true, 
       templateUrl: viewsRoot + "container.html", 

      }) 
     .state('layout.mainview.object-details', { 
      url: '/object-details', 
      templateUrl: viewsRoot + "object-details.html", 
      controller: 'ObjectDetailsController' 
     }) 
     .state('layout.mainview.home', { 
      url: '/', 
      templateUrl: viewsRoot + "home.html", 
      controller: 'HomeController' 
     }) 

    $urlRouterProvider.otherwise('/'); 

Это layout.html:

<div ui-view="sidebar"> 
 
</div> 
 
<div class="page-content-wrapper"> 
 
    <div class="page-content" style="min-height: 1227px"> 
 
     
 
     <!-- END PAGE SPINNER --> 
 
     <div ui-view="mainview"> 
 
     </div> 
 
     <!-- END PAGE CONTENT--> 
 
    </div> 
 
</div>

Это container.html

<ui-view></ui-view>

Должен ли я использовать вложенные представления вместо вложенных состояний?

Answer 1

Вам нужно определить, что делает где. У вас есть две области, «siderbar» и «MainView», но вы не определить, что шаблон идет к тому, что вид в вашем штате конфиги

$stateProvider 
    .state('layout.home',{ 
    views: { 
     'mainview': { 
     templateUrl: '...', 
     controller: ... 
     }, 
     'siderbar': { 
     templateUrl: '...', 
     controller: ... 
     } 
    } 
    }) 

См https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views для получения дополнительной информации