UI router - Multiple nested named views in a single state

Question

index.html
--navbar.html
--content.html
  --customer.html
    --netScore.html
    --useExp.html
      --useExpNest1.html
      --useExpNest2.html
  --internalPerformance.html
--leftNavPanel.html

I have this kind of view structure and I want to load them all at once so I'm planning to put this in a single state. I saw this answer but it seems that its only applicable for a simple/double nested views(I have 3 or more nested views). How can I put this in a single state, or is there a better way if not possible?

EDIT

I've come up with this solution and it works somehow.

.state('index', {
    url: '/',
    views: {
        '': {
            templateUrl: 'app/modules/bulletin/views/index.view.html',
            controller: 'indexController'
        },
        'navbar@index': {
            templateUrl: 'app/modules/bulletin/views/index/navbar.view.html',
            controller: 'navbarController'
        },
        'content@index': {
            templateUrl: 'app/modules/bulletin/views/index/content.view.html',
            controller: 'contentController'
        },
        'leftNavPanel@index': {
            templateUrl: 'app/modules/bulletin/views/index/leftNavPanel.view.html',
            controller: 'contentController'
        }
    }
})
.state('index.content', {
    views: {
        'customer@index': {
            templateUrl: 'app/modules/bulletin/views/index/content/customer.view.html'
        },
        'internalPerformance@index': {
            templateUrl: 'app/modules/bulletin/views/index/content/internalPerformance.view.html'
        }
    }
})
.state('index.content.customer', {
    views: {
        'netScore@index.content': {
            templateUrl: 'app/modules/bulletin/views/index/content/customer/netScore.view.html'
        },
        'useExp@index.content': {
            templateUrl: 'app/modules/bulletin/views/index/content/customer/useExp.view.html'
        }
    }
})
.state('index.content.customer.useExp', {
    views: {
        'useExpNest1@index.content.customer': {
            templateUrl: 'app/modules/bulletin/views/index/content/customer/useExp/useExpNest1.view.html'
        },
        'useExpNest2@index.content.customer': {
            templateUrl: 'app/modules/bulletin/views/index/content/customer/useExp/useExpNest2.view.html'
        }
    }
})

And then add this code to the indexController(most parent controller)

$state.go('index.content');
$state.go('index.content.customer');
$state.go('index.content.customer.useExp');

But this answer is still wrong because, let's say that netScore.html has some child views, we will create route for it then go to that state, but netScore and useExp states are on the same level so only one of them will be loaded if we use

$state.go('index.content');
$state.go('index.content.customer');
$state.go('index.content.customer.netScore');
$state.go('index.content.customer.useExp');

EDIT 2 Here's a plunker of what I've done so far. The view names are slightly different but you will see clearly the problem there

score 2 · Answer 1 · answered Jan 20 '16 at 12:14

You can use a combination of named views plus abstract: true property to load child views by default

angular.module('sampleModule', [
  'ui.router'  
]);


angular.module('sampleModule')
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('','/');
    $stateProvider
        .state('main', {
            url: '',
      abstract: true,
      templateUrl: 'main.view.html'
        })
        .state('main.load', {
            url: '/',
            abstract: true,
            views:{
              'content':{
                templateUrl:'content.view.html',
              },
              'navbar':{
                templateUrl:'navbar.view.html',
              }
            }
        })
        .state('main.load.customer', {
            url: '',
            abstract: true,
            views:{
              'customerPerception':{
                templateUrl:'content-customerPerception.view.html'
              },
              'customerExperience':{
                templateUrl:'content-customerExperience.view.html'
              }
            }
        })
        .state('main.load.customer.netTrustScore', {
            url: '',
            abstract: true,
            views: {
                'netTrustScore': {
                    templateUrl: 'content-customerPerception-netTrustScore.view.html'
                },
                'useExperience': {
                    templateUrl: 'content-customerPerception-useExperience.view.html'
                },
                'trustStatements': {
                    templateUrl: 'content-customerPerception-trustStatements.view.html'
                }
            }
        })
    .state('main.load.customer.netTrustScore.somethingElse', {
            url: '',
            views: {
                'abc': {
                    templateUrl: 'content-customerExperience-customerComplaints.view.html'
                },
        '': {
          templateUrl: 'content-customerExperience-networkQualityIndex.view.html'
        }
            }
        })
    ;
}])

.controller('mainController', ['$scope', '$state', function($scope, $state) {

    console.log('mainController initialized!');


}]);

here's a plnkr https://plnkr.co/edit/BBAeWjnGbTsbO1lMguU9?p=preview

I have 2 views on the same level(customerPerception and customerExperience) that have children. Using this solution will only load one of them. — Alex Coroza, Jan 21 '16 at 04:11

Alex Coroza · Accepted Answer · 2016-01-21T05:21:53.533

Thanks to the guys from AngularJS group in FB. The problem is I put two sibling views in two different states. UI router cant load two states at the same time. So the solution is to put all same level views in a single subState.

Lets assume we have this kind of structure:

index.html
--navbar.html
--content.html
  --customer.html
    --netScore.html
      --netScoreNest1.html
      --netScoreNest2.html
    --useExp.html
      --useExpNest1.html
      --useExpNest2.html
  --internalPerformance.html
--leftNavPanel.html

the proper routing for this would be like this

.state('index', {
    url: '/',
    views: {
        '': {
            templateUrl: 'index.view.html',
            controller: 'mainController'
        },
        'navbar@main': {
            templateUrl: 'index/navbar.view.html'
        },
        'content@main': {
            templateUrl: 'index/content.view.html'
        },
        'leftNavPanel@main': {
            templateUrl: 'index/leftNavPanel.view.html'
        }
    }
})
.state('index.subLevel', {
    views: {
        'customer@index': {
            templateUrl: 'index/content/customer.view.html'
        },
        'internalPerformance@index': {
            templateUrl: 'index/content/internalPerformance.view.html'
        }
        // IF LEFTNAVPANEL OR NAVBAR HAVE SUB VIEWS, PUT IT HERE
    }
})
.state('index.subLevel.subLevel2', {
    views: {
        'netScore@index.subLevel': {
            templateUrl: 'index/content/customer/netScore.view.html'
        },
        'useExp@index.subLevel': {
            templateUrl: 'index/content/customer/useExp.view.html'
        }
        // IF INTERNALPERFORMANCE HAVE SUB VIEWS, PUT IT HERE
    }
})
.state('index.subLevel.subLevel2.subLevel3', {
    views: {
        'netScoreNest1@index.subLevel.subLevel2': {
            templateUrl: 'index/content/customer/netScore/netScoreNest1.view.html'
        },
        'netScoreNest2@index.subLevel.subLevel2': {
            templateUrl: 'index/content/customer/netScore/netScoreNest2.view.html'
        },
        'useExpNest1@index.subLevel.subLevel2': {
            templateUrl: 'index/content/customer/useExp/useExpNest1.view.html'
        },
        'useExpNest2@index.subLevel.subLevel2': {
            templateUrl: 'index/content/customer/useExp/useExpNest2.view.html'
        }
    }
})

And then in mainController, load the inner most child state, this will automatically load the views of all its parent(up to topmost parent state 'index')

$state.go('index.subLevel.subLevel2.subLevel3');

And thats it. And also here's a plunker to make it easier to understand. (Views and structure are slightly different from this post different. Too lazy to edit)

UI router - Multiple nested named views in a single state

2 Answers2