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

Question

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

我有一个带有导航的简单单页布局。每个导航项都有一个包含内容的 div 框。我现在如何在一页上定义多个状态(对于每个导航项，一个状态具有单独的 Controller 和模板)？

之后我想实现一个解决方案，当我单击导航项以滚动到相应的 div 容器时。基本上这是用 HTML anchor 制作的，但我如何用 ui-router 解决这个问题？或者这是不可能的，我必须用单独的 View 创建一个状态？

在示例图像下方，向您展示所需的布局:



希望有人有解决方案。

提前致谢，
神经网络

Answer 1

使用 ui-router 您可以在一个页面上有多个 View 。所以你将能够做这样的事情:

$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