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 scotch.io/tutorials/angular-routing-using-ui-router github.com/angular-ui/ui-router/wiki/… — Sarun UK
– Sarun UK, Commented Nov 7, 2016 at 14:05

Community · Accepted Answer · 2017-05-23 11:48:43Z

1

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:

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Nov 7, 2016 at 14:11

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

2 Comments

codehero Over a year ago

It's not exactly want I wanted, but it helped a lot solving my problem. Thank you very much!

Radim Köhler Over a year ago

Great if that heplped anyhow;) Enjoy mighty UI-Router

Tim Consolazio · Accepted Answer · 2016-11-07 13:49:16Z

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.

Collectives™ on Stack Overflow

ui-view inside another not showing

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related