CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-uistate
codehero
codehero

Reputation: 509

ui-view inside another not showing

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

Upvotes: 1

Views: 183

Answers (2)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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:

Upvotes: 1

Tim Consolazio
Tim Consolazio

Reputation: 4888

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.

Upvotes: 0

Related Questions