angularjs - ui-router multiple nested views

Question

Trying to figure out multiple nested views concept and don't seem to understand what I'm doing wrong.

app.js routing config :

.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
    'ngInject';

    $stateProvider.state('home', {
         url: '/',
         templateUrl: 'tpls/views/welcome.html'
    })
    .state('feeds', {
        url: '/feeds',
        views: {
            'main': {
                templateUrl: 'tpls/views/main.html'
            },
            'siderbar@feeds' : {
                templateUrl: 'tpls/views/sidebar.html',
                controller: 'MyCtrl',
                controllerAs : 'main'
            },
            'mainfeed@feeds': {
                templateUrl: 'tpls/views/mainfeed.html',
                controller: 'MyCtrl',
                controllerAs : 'main'
            }
        }
    });
    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
});

HTMLs:

on

index.html

I have an an empty directive <div ui-view></div>

and this is main.html :

<div class="row">
    <div class="col-md-4 no-float sidebar">
        <div ui-view="sidebar"></div>   
    </div>
    <div class="col-md-8 no-float">
        <div ui-view="mainfeed"></div>
    </div>
</div>

My views arent rendering. When in /feeds I only see the background. Can you please help me spot the problem? Went over the github documentation and still couldn't infer the solution. Thanks!

Answer 1

This is how the syntax look like for Nested views. Please cross check with your Syntax.
Note : This one is third party so we used ui.router.stateHelper

angular.module('myApp', ['ui.router', 'ui.router.stateHelper'])
  .config(function(stateHelperProvider){
    stateHelperProvider.setNestedState({
      name: 'root',
      templateUrl: 'root.html',
      children: [
        {
          name: 'contacts',
          templateUrl: 'contacts.html',
          children: [
            {
              name: 'list',
              templateUrl: 'contacts.list.html'
            }
          ]
        },
        {
          name: 'products',
          templateUrl: 'products.html',
          children: [
            {
              name: 'list',
              templateUrl: 'products.list.html'
            }
          ]
        }
      ]
    });
  });

visit this more details..https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

Answer 2

Make sure that base page index.html should have named view main.

<div ui-view="main"></div>

---

If main named view isn't there then, you could have '' in your base view of feeds like below.

Code

.state('feeds', {
    url: '/feeds',
    views: {
        //used blank to target unnamed `ui-view` placed on html
        '': {
            templateUrl: 'tpls/views/main.html'
        },
        'siderbar@feeds' : {
            templateUrl: 'tpls/views/sidebar.html',
            controller: 'MyCtrl',
            controllerAs : 'main'
        },
        'mainfeed@feeds': {
            templateUrl: 'tpls/views/mainfeed.html',
            controller: 'MyCtrl',
            controllerAs : 'main'
        }
    }
});