使用ui-router在一个页面上显示多个状态

Question

目前我正在研究为以下场景配置ui-router的可能性。如果有人知道如何实现这一目标，那就太棒了。

我有一个带导航的简单的一个寻呼机布局。每个导航项都有一个包含内容的div框。我现在如何在一个页面上定义几个状态（对于每个导航项目，一个状态具有单独的控制器和模板）？

之后我想实现一个解决方案，当我点击导航项目滚动到相应的div容器时。基本上这是用HTML锚点制作的，但我怎么能用ui-router解决这个问题呢？或者这不可能，我必须创建一个具有不同视图的状态？

在示例图片下方显示所需的布局：

希望有人有解决方案。

提前致谢，
xyNNN

Answer 1

使用ui-router，您可以在一个页面上拥有多个视图。所以你可以做这样的事情：

$stateProvider
.state('main',{
  views: {
    'contentSite1': {
      templateUrl: 'site1.html',
      controller: function($scope){}
    },
    'contentSite2': {
      templateUrl: 'site2.html',
      controller: function($scope){}
    },
    'contentSite3': {
      templateUrl: 'site3.html',
      controller: function($scope){}
    },
  }
});

以下链接包含更多解释https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views