AngularJS中如何使用UI路由器，多个嵌套视图？

Question

我一直在阅读有关nested views和multiple views的内容，但我找不到使用两者的示例

在目标网页中，我有多个视图，一个接一个。一张图片说千言万语：

考虑：

• 每个部分/视图都有完整的窗口高度，因此在滚动时我想将位置更改为/view1，/view2，/view3等。
• • 这应该与转到/view1/b或/view3/b并显示子视图（view1.b或view3.b）兼容。
• • 滚动不应再次显示加载页面。

我单独完成任务但不是一起完成任务。

Answer 1

你可以使用$ statePorivder嵌套视图和

       config(function ($stateProvider) {

            $stateProvider
              .state('main', {
                url: '/',
                views: {
                  '': {
                    templateUrl: 'app/main/layout.html',
                    controller: 'LayoutController'
                  },
                  'header@main': {
                    templateUrl: 'app/main/header/layout.html',
                    controller: require("./headerController.js")
                  },
                  'left@main': {
                    templateUrl: 'app/main/left/layout.html',
                    controller: require("./leftController.js")
                  },
                  'content@main': {
                    templateUrl: 'app/main/content/layout.html',
                    controller: require("./conentController.js")
                  },
                  'right@main': {
                    templateUrl: 'app/main/right/layout.html',
                    controller: require("./rightController.js")
                  }
                }
              });
          };