AngularJS UI Router nested view not loading content

Question

I've looked at countless examples of how to set this up. Many right here at SO. But nothing is working in my case. It's a very simple set of two views, one nested below the first. Second ui-view never loads...

Here is the simple index.html...

<body ng-app="d6Games">
   <div ui-view="home"></div>
</body>

Here is the simple child view, this is inside home.html template...

<div class="d6body bilbo">
     <div ui-view="content"></div>
</div>

Here are the simple states...

.state('home', {
    url: '/home',
    views: { 
        'home': {
            templateUrl: '/views/home.html'
        }
    }
})

.state('home.intro', {
    url: '/intro',
    views: { 
        'content': {
            templateUrl: '/views/game-intro.html'
        }
    }
})

The first /views/home.html template loads fine, as expected, however the child /views/game-intro.html never loads. It's just html and text and it's in the same folder as home.html.

What am I missing?

score 0 · Accepted Answer · answered Apr 12 '15 at 18:12

0

There is a working plunker

I just changed the template path (removed the leading '/'), and all is working (however this was required for plunker, not sure about your environment and path settings):

$stateProvider
  .state('home', {
    url: '/home',
    views: {
      'home': {
        templateUrl: 'views/home.html'
      }
    }
  })

  .state('home.intro', {
    url: '/intro',
    views: {
      'content': {
        templateUrl: 'views/game-intro.html'
      }
    }
  })
}

Check that in action here

answered Apr 12 '15 at 18:12

Radim Köhler

122,561
47
239
335

Ok, getting closer. I added the ui-sref links to the index.html, like you have. They actually do work when you click them. The game-intro.html loads as expected. However, why doesn't it load automatically, when the page loads, without having to click the home.intro link? – Locohost Apr 12 '15 at 18:40
Not sure what you mean, but I added this line `$urlRouterProvider.otherwise('/home/intro');` and you can check in this forked plunker that it is working http://plnkr.co/edit/Vg3fmypcepEgkA8c40ju?p=preview .. the intro is initially working. In case, that you want to set some **child** state to be default (instead of its parent) you should check these links: http://stackoverflow.com/a/29579343/1679310 and http://stackoverflow.com/q/29491079/1679310 – Radim Köhler Apr 12 '15 at 18:46

AngularJS UI Router nested view not loading content

1 Answers1