Angular UI 路由器嵌套视图

我有这样的结构：

<div ui-view="main">
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

我希望能够在主状态中定义模板，如下所示，而不必在子状态中管理它。

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    'sidebar': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

我想要名为 ui-view 的sidebar不是一个孩子状态main并由以下人员填充main状态的视图对象而不是子状态的 templateUrl 字段。我怎样才能做到这一点？

我们可以用more里面的景色one状态，参见：

• 多个命名视图

该定义只需要使用绝对命名：

.state('state1', {
  url: '/',
  views: {
    'main': {
      templateUrl: '/modules/blog/partials/index.html',
      controller: 'BlogController'
    },
    // instead of
    // 'sidebar': {
    // we need
    'sidebar@state1': {
      templateUrl: '/modules/core/partials/sidebar.html'
    }
  }
});

正如这里详细解释的：

• 视图名称 - 相对名称与绝对名称

在幕后，每个视图都会被分配一个绝对名称，该名称遵循以下方案：viewname@statename，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系人.项目。您还可以选择以绝对语法编写视图名称。

因此，如上面的代码片段所示，如果

 /modules/blog/partials/index.html

将会：

<div>
  <!-- content populated here by AngularJS ui-router -->
  <aside ui-view="sidebar">
    <!-- content populated here by AngularJS ui-router -->
  </aside>
</div>

并且index.html将包含占位符：

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

然后

• 'main'- 将在父根目录（index.html）中搜索
• 'sidebar@state1'将被评估为“state1”（本身）中的 viewName/target

An example有类似的想法和一些layout.html后面......