AngularJS ui-router view not showing up?

Question

I have a very simple appConfig:

var home = {
    name: 'home',
    url: '/home/'
};

var homeAccess = {
    name: 'home.access',
    url: 'access',
    views: {
       'home': {
           templateUrl: 'app/access/partials/webapi.html'
       }
    }
};

In my index.html I have this code:

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

But when I navigate to the home/access all I see is the words "home view here"

Can anyone see what I might be doing wrong for my access page to not show up.

Answer 1

The root stat home, is expecting unnamed view target - so index.html should contain it

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

And the home state now should contain target for its child

var home = {
    name: 'home',
    url: '/home/',
    template: '<div ui-view="home">home view here</div>'
};

Or we can target the root view in our home.access state like this '@home':

var homeAccess = {
    name: 'home.access',
    url: 'access',
    views: {
       //'home': {
       'home@': {
           templateUrl: 'app/access/partials/webapi.html'
       }
    }
};

Check similar here: Angular UI Router - Nested States with multiple layouts

Answer 2

As I wrote in the comment, you've only showed us some variables, but you need to change the views part:

var homeAccess = {
    name: 'home.access',
    url: 'access',
    views: {
       'home@': {
           templateUrl: 'app/access/partials/webapi.html'
       }
    }
};