Angular UI-Router multiple views

Question

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?

Tiago · Accepted Answer · 2015-10-23 09:15:07Z

109

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.

edited Oct 23, 2015 at 9:15

Tiago

4,55013 gold badges52 silver badges72 bronze badges

answered Apr 25, 2014 at 3:58

appletwo

1,1381 gold badge8 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rcheuk Over a year ago

tutorial link was just what i was looking for. Thanks!

davidfmatheson Over a year ago

Much better example than github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. This simplified my configuration from abstract state w/ child, which seems to be what the github wiki suggests. Thanks so much!

yellow-saint Over a year ago

Perfect, I'm using this to have two types of views (single - think no header, just full page login pages; and content - standard pages with headers and footers). QUESTION: is this a hacky setup or a WAD method?

PavanSandeep Over a year ago

How do I share the scope variables across these multiple views ?

Mosh Feu · Accepted Answer · 2017-09-28 08:16:34Z

10

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

edited Sep 28, 2017 at 8:16

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

answered Aug 27, 2014 at 20:08

squidbe

1,0101 gold badge8 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular UI-Router multiple views

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related