Angular ui-router nested states - can't specify the parent

Question

I have the following states declaration (angular v1.5.5):

$stateProvider
    .state('appPublic', {
        abstract: true,
        data: { restricted : false }
    })
    .state('home', {
        url: '/',
        parent: 'appPublic',
        templateUrl: 'app/views/main.html',
        controller: 'mainCtrl'
    });

When I open my site, I don't see the main html content (the home state). But, when I remove the parent: 'appPublic' declaration - it works then. So, why I can't to specify the state's parent ?

That's weird, what happens if you remove `abstract : true`? – AndreaM16 Sep 17 '16 at 12:33 — AndreaM16, Sep 17 '16 at 12:33

score 3 · Answer 1 · edited May 23 '17 at 12:10

Every parent, must provide a view target for its child (if using unnamed views are used, i.e parent is not skipped with absolute view naming - Angularjs ui-router not reaching child controller). So this should work

.state('appPublic', {
     abstract: true,
     data: { restricted : false },
     template: '<div ui-view=""></div'
 })

now, child view (unnamed view) will be placed in the ui-view target, declared in parent's template

score 2 · Answer 2 · answered Sep 17 '16 at 12:53

2

try this:

 $routeProvider.when('/userLogin',
                            {
                                templateUrl: 'WebrtcLogin.html',
                                controller: 'UserLoginController'
                            })

answered Sep 17 '16 at 12:53

aditya shrivastava

684
1
7
20

score 0 · Answer 3 · edited May 23 '17 at 10:27

0

ok, I needed to include template: '<ui-view/>' in my abstract state. The answer is here https://stackoverflow.com/a/33181762/106616

edited May 23 '17 at 10:27

Community

1
1

answered Sep 17 '16 at 12:50

Tony

11,443
32
119
213

Angular ui-router nested states - can't specify the parent

3 Answers3