ui-view inside another not showing

Question

I have a question regarding Angular UI-Router and its ui-views. I declare three ui-views inside another one, and the only one that shows up is the one with the name "languages". I don't understand why this happens, and if anybody could help that would be great.

index.html:

<div ui-view="languages">
  <div ui-view="dashboard"></div>
  <div ui-view="partners"></div>
  <div ui-view="footer"></div>
</div>

routes.js:

angular.module('TMHM')
.config(routeConfig);

routeConfig.$inject = ['$stateProvider', '$urlRouterProvider'];

function routeConfig ($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/',
      views: {
        'languages': {
          templateUrl: 'views/languages/languages.html'
        },
        'dashboard': {
          templateUrl: 'views/dashboard/dashboard.html'
        },
        'partners': {
          templateUrl: 'views/partners/partners.html'
        },
        'footer': {
          templateUrl: 'views/footer/footer.html'
        }
      }
    });

  $urlRouterProvider.otherwise('/');
};

Here's the Plunker code, although I couldn't get that to work: https://plnkr.co/edit/z8cFGHKVQNN623QbBUqi

For better understanding go through these tutorials https://scotch.io/tutorials/angular-routing-using-ui-router https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names — Sarun UK, Nov 07 '16 at 14:05

score 1 · Answer 1 · edited May 23 '17 at 11:48

There is updated and working plunker https://plnkr.co/edit/vKOr2yLUfaAfwoGyK0ws?p=preview

I created new routes.html, with this content

<h1>Routes</h1>

<hr />
<div ui-view="languages"></div>
<div ui-view="dashboard"></div>
<div ui-view="partners"></div>
<div ui-view="footer"></div>

And changed index.html to contain

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

And then state adjustment is:

.state('home', {
  url: '/',
  views: {
    '': {
      templateUrl: 'routes.html'
    },
    'languages@home': {
      templateUrl: 'languages.html'
    },
    'dashboard@home': {
      templateUrl: 'dashboard.html'
    },
    'partners@home': {
      templateUrl: 'partners.html'
    },
    'footer@home': {
      templateUrl: 'footer.html'
    }
  }
});

Also, essential was move the ng-app from <head> to <html> element

<html ng-app="TMHM">

  <head >

check it here

More details and examples about named and multi views:

It's not exactly want I wanted, but it helped a lot solving my problem. Thank you very much! — codehero, Nov 07 '16 at 15:49

score 0 · Answer 2 · answered Nov 07 '16 at 13:49

I've never seen that done this way before (a routed view in a routed view). That may be because it doesn't work, or I've just never run into it, I don't know. I tend to think of views as being top level, and then includes as being the nested content.

If that's the idea, I've done something very similar to this, but I used ng-include (I currently have this in production in an app serving a lot of users):

<div ng-include="mycontroller.pathToFileIWantToShow"></div>
// alternatively, although hardcoding can be evil...
<div ng-include="path/to/some/file.html"></div>

This allows me to change the content dynamically, use binding etc. etc, and each included template can reference its own controller, or just use the controller that wraps it. It doesn't seem to matter how many I nest.

ui-view inside another not showing

2 Answers2