UI 路由器是否可以在 index.html 和嵌套状态中具有单个 ui-view？

Question

我正在建立一个项目，并使用 ui-router。 要求是具有不断附加的网址，例如：#/home/contacts。 为了实现这一点，我必须使用嵌套状态。 例如：home 和 home.contacts，其中家庭状态将在模板中填充。

但我想在根级别有一个单一的 ui-view，index.html，当我点击 url 时，它将获得模板，例如，home 或 home/contacts。 是否可以使用 ui-router 获得这种行为？

简而言之，具有嵌套行为[未嵌套，我想在 index.html 中使用单个 ui-view 附加 url]。

笔记

Answer 1

您能否将状态的 URL 指定为明确的 home/contacts？

请参阅下面的示例：

app.config(function($stateProvider) {

  var routes = [
  {
    state: 'home',
    config: {
      url: '/home',
      template: '<h3>Home</h3>'
    }
  }, 
  {
    state: 'contacts',
    config: {
      url: '/home/contacts',
      template: '<h3>Contacts</h3>'
    }
  }];

  routes.forEach(function(route) {

    if (route.state) {
      $stateProvider.state(route.state, route.config);
    }
  });

});

看法：

  <body ng-controller="MainCtrl">
    <a ui-sref="home">Home</a>
    <a ui-sref="contacts">Contacts</a>

    <div ui-view></div>
  </body>

工作 Plnkr 示例在这里。