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?

Radim Köhler · Accepted Answer · 2015-04-12 18:12:41Z

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, 2015 at 18:12

Radim Köhler

124k48 gold badges242 silver badges341 bronze badges

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
Commented Apr 12, 2015 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 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: stackoverflow.com/a/29579343/1679310 and stackoverflow.com/q/29491079/1679310
– Radim Köhler
Commented Apr 12, 2015 at 18:46

Add a comment |

Collectives™ on Stack Overflow

AngularJS UI Router nested view not loading content

1 Answer 1

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related