How have in AngularJS with UI Router, multiple and nested views?

Question

I have been reading about nested views and multiple views but I can't find an example using both

In a landing page I have multiple views, one after other. A picture speaks a thousand words:

To consider:

• Every section/view will have full window height, so on scroll I want to change location to /view1 , /view2 , /view3 , etc.
• • That should be compatible with going to /view1/b or /view3/b and showing subview ( view1.b or view3.b ).
• • Scroll should not make load page again.

I have success doing tasks separately but not all together.

Answer 1

you can use $statePorivder nested view with

       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")
                  }
                }
              });
          };