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.

Do you have a root ui-view ? Other routes are working ? Any errors on console ? webapi.html is being loaded ? — João Mosmann, Feb 19 '16 at 14:04
These are just a variables, can we assume they are part of a state definition you havn't included in the question? — Alon Eitan, Feb 19 '16 at 14:04
@Alon - These have been include in the state definition. Sorry I was just giving a snippet here. — , Feb 19 '16 at 14:06
You have to provide more detail please. The problem can be in any place! — CodeArtist, Feb 19 '16 at 14:07
@JoãoMosmann - no errors and I notice webapi.html was not loaded — , Feb 19 '16 at 14:07

score 4 · Accepted Answer · edited May 23 '17 at 12:07

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

score 4 · Answer 2 · answered Feb 19 '16 at 14:07

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'
       }
    }
};

AngularJS ui-router view not showing up?

2 Answers2