Javascript 使用“用户界面路由器”；“主要”；布局？

我正在尝试使用ui路由器视图为我的页面创建“主布局”，但似乎无法正常工作（各种错误、未调用控制器、未加载模板）

应用程序加载时没有任何错误，但模板和控制器从未被调用。我错过什么了吗

我也看到很多人提供了一个单独的“布局”视图，将GET加载到一个未命名的视图中（主要是在<代码> <代码>标签上），但是我认为这是无用的，主要是<代码>索引。HTML<代码>文件已经是我的布局。或者：有没有更好的方法来实现我的目标？

有一个答案，上面有一个显示布局的工作插销：

关键是有index.html和

<div ui-view="layout"></div>

这是国家国防部

$stateProvider
  .state('root', {
    url: '',
    views: {
      'layout': {
        templateUrl: 'partials/layout/1-column.html'
      },
      'header@root': {
        templateUrl: 'partials/layout/sections/header.html'
      },
      'footer@root': {
        templateUrl: 'partials/layout/sections/footer.html'
      }
    }
  })

它是如何工作的？我们使用的是绝对和相对目标名称

在幕后，每个视图都会被分配一个绝对名称，该名称遵循一种模式viewname@statename，其中viewname是view指令中使用的名称，state name是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称

例如，前面的示例也可以写成：

<div ui-view="layout"></div>

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>
  
  <section class="middle">
    
    <section class="left">
      <div ui-view="left"></div>
    </section>
    
    <section class="main">
      <div ui-view="main"></div>
    </section>
  
  </section>
</div>

$stateProvider
  .state('root', {
    url: '',
    views: {
      'layout': {
        templateUrl: 'partials/layout/1-column.html'
      },
      'header@root': {
        templateUrl: 'partials/layout/sections/header.html'
      },
      'footer@root': {
        templateUrl: 'partials/layout/sections/footer.html'
      }
    }
  })

  .state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
  })