State with different subviews

Question

I have a articledetail state, which I navigate to:

$state.go('articledetail', { 'article': article.itemNumber });

In articleDetail.html, I'd like to load the subviews, all at the same time:

    <div class="tab-content col-xs-7">
        <div ui-view="tab1"></div>
        <div ui-view="tab2"></div>
        <div ui-view="tab3"></div>
        <div ui-view="tab4"></div>
        <br />
</div>

Below is my state config. I have already tried using both @ and without @, but none of my views (not even the main one) gets loaded and I'm not getting any errors.

    $stateProvider.state('articledetail', {
        url: '/articledetail/:article',
        templateUrl: '/articledetail/articleDetail.html',
        controller: 'articleDetailController',
        controllerAs: 'vm',
        views: {
            'tab1@': {
                templateUrl: '/articledetail/tab1.html'
            },
            'tab2@': {
                templateUrl: '/articledetail/tab2.html'
            },
            'tab3@': {
                templateUrl: '/articledetail/tab3.html'
            },
            'tab4@': {
                templateUrl: '/articledetail/tab4.html'
            }
        }
    });

The frustrating thing is I don't get any errors, so I have no idea what I'm doing wrong. I've already enabled error logging as explained in the ui-router FAQ, but without result.

What am I doing wrong?

Answer 1

You would need this in index.html

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

And then the state could be changed to this:

$stateProvider.state('articledetail', {
    url: '/articledetail/:article',
    views: {
        // this would instractu UI-Router
        // to inject the articleDetail.html into index.html
        // into target ui-view="" (would be the same as '@')
        '': {
            templateUrl: '/articledetail/articleDetail.html',
            controller: 'articleDetailController',
            controllerAs: 'vm',
        },
        // these will now be injected into above view,
        // and absolute name says: viewName@stateName
        // and the state is 'articleDetail'
        // so we need 'tab1@articledetail'
        'tab1@articledetail': {
            templateUrl: '/articledetail/tab1.html'
        },
        'tab2@articledetail': {
            templateUrl: '/articledetail/tab2.html'
        },
        'tab3@articledetail': {
            templateUrl: '/articledetail/tab3.html'
        },
        'tab4@articledetail': {
            templateUrl: '/articledetail/tab4.html'
        }
    }
});