Angular UI-Router multiple views

Question

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

.config(function config($stateProvider) {
  $sta         


        

Answer 1

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.

Answer 2

The .state() method's templateUrl is ignored when using the views object. See the ui-router wiki for more info: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#user-content-views-override-states-template-properties