0

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: enter image description here

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.

Mikel
  • 5,902
  • 5
  • 34
  • 49
  • _I have success doing tasks separately but not all together._ - What doesn't work? – Alon Eitan Apr 28 '16 at 14:08
  • i don't get what you want to do. did you want to display all the views in the same time or one by one ? You can use the `ng-include` directives to load different view according to variable in $scope. `
    `     – AlainIb Apr 28 '16 at 14:26
  • yes i want to display all views at same time. I wanted to use ui router and no `ng-show` / `ng-if` because I thought I would be better/cleaner. I will try with `ng-include` – Mikel Apr 28 '16 at 16:16
  • There is not so magic about state hierarchy. There is an example which does really show we you can achieve with UI-Router http://stackoverflow.com/q/28800644/1679310 – Radim Köhler Apr 29 '16 at 05:10

1 Answers1

0

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")
                  }
                }
              });
          };
oguzhan00
  • 499
  • 8
  • 16
  • yeah, this are multiple views, but how can I go to a subview in one on those views? In post example go to `/view1/b`. I need to know the way to create a nested state for one of the multiple views – Mikel Apr 28 '16 at 16:21
  • Did you see that: http://stackoverflow.com/questions/31032957/multiple-views-with-nested-views-angular – oguzhan00 Apr 29 '16 at 06:25