Angular UI Route

Question

很抱歉，如果之前已经提出了类似的问题，但我一直在努力让某个设置工作一段时间。我从一个现有问题中找到了一名工作人员，并试图根据我的需要稍微调整一下。

Orginal Plunker：http://plnkr.co/edit/uY1Sl3f0KCTukPGHDRdW

我的（稍微）编辑过的叉子：http://plnkr.co/edit/hlw4Et00UeGjzxD4Mszi

我想要实现的是一个基本布局，其中包含页面内容的页眉，页脚和未命名视图。我可以用原始的plunker做得很好。但是当我试图变得更加花哨并且结构更像这样时：

$urlRouterProvider.otherwise('/home/list');

$stateProvider
    .state('root', {
      abstract: true,
      views: {
        '@': {
          controller: 'RootCtrl',
          controllerAs: 'rootCtrl'
        },
        'header@': {
          templateUrl: 'header.html',
          controller: 'HeaderCtrl',
          controllerAs: 'headerCtrl'
        },
        'footer@': {
          templateUrl: 'footer.html',
          controller: 'FooterCtrl',
          controllerAs: 'footerCtrl'
        }
      }
    })

以下是调整后的州定义：

.state('root.home', {
  parent: 'root',
  url: '/home',
  views: {
    '@': {
      template: '<ui-view></ui-view>',
      controller: 'HomeController',
      controllerAs: 'homeCtrl'
    },
    'list@root.home': {
      url: '/list',
      template: 'homeList.html',
      controller: 'HomeController',
      controllerAs: 'homeCtrl'
    }
  },
});

我在这里尝试做的是让'root.home'状态只是一个基础状态，用于在URL'home'之前或者我的实际应用程序中的url。我已经尝试通过ui-route示例应用程序做好准备，但是要接受并且进入圈子需要很多。我确信这很简单......