angularjs - 使用 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