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!

You are telling everything nut have not mentioned your problem or error? — Amit Sirohiya
– Amit Sirohiya, Commented Mar 18, 2016 at 10:46
You have a typo in state definition its siderbar where as it should be sidebar — Coder John
– Coder John, Commented Mar 18, 2016 at 10:58

Pankaj Parkar · Accepted Answer · 2016-03-18 10:35:44Z

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

answered Mar 18, 2016 at 10:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saar Kuriel Over a year ago

So simple. Thank you so much!

Pankaj Parkar Over a year ago

@SaarKuriel Glad to know that. Thanks :-)

Prasanth-Ramanathan · Accepted Answer · 2016-03-18 11:03:47Z

0

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

answered Mar 18, 2016 at 11:03

Prasanth-Ramanathan

744 bronze badges

1 Comment

Saar Kuriel Over a year ago

I've mentioned that I already been through that and it didn't help me.

Collectives™ on Stack Overflow

angularjs - ui-router multiple nested views

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related