TJF TJF - 4 months ago 64
AngularJS Question

Angular UI-Router multiple views

I am using angular UI-Router. I have the following in my route config

.config(function config($stateProvider) {
$stateProvider.state('newsFeedView', {
url: '/newsFeed',

controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html',


data: { pageTitle: 'News Feed' }
})
.state('tradeFeedView', {
url: '/tradeFeed',

controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html',


data: { pageTitle: 'Trade Feed' }
})
.state('bulletinBoard', {
url: '/bulletinBoard',
views: {
'tradeFeed': {
url: "",
controller: 'tradeFeedController',
templateUrl: '../src/app/bulletinBoard/views/tradeFeed.part.html'
},
'newsFeed': {
url: "",
controller: 'newsFeedController',
templateUrl: '../src/app/bulletinBoard/views/newsFeed.part.html'
}
},
templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html'
});
})


In my index page I just invoke the view using:

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


In My bulletinBoard.html i want to have a nested view:

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


For the /newsFeed page and the /tradeFeed pages this works perfectly but for the bulletin board i can't see anything on the page. Where am i going wrong?

Answer

I find the example on the official GitHub wiki to be very unintuitive. Here is a better one:

https://scotch.io/tutorials/angular-routing-using-ui-router

For instance:

...

.state('bulletinBoard', {
    url: '/bulletinBoard',
    views: {

        // the main template will be placed here (relatively named)
        '': { templateUrl: '../src/app/bulletinBoard/views/bulletinBoard.part.html' },

        // the child views will be defined here (absolutely named)
        'tradeFeed@bulletinBoard': { template: ..... },

        // another child view
        'newsFeed@bulletinBoard': { 
            templateUrl: ......
        }
    }

});

The syntax of each view attribute being viewName@stateName.