45

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?

2 Answers 2

108

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.

4
  • 6
    tutorial link was just what i was looking for. Thanks!
    – rcheuk
    Commented May 11, 2014 at 11:45
  • 2
    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! Commented Aug 28, 2014 at 12:35
  • 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? Commented Oct 11, 2014 at 20:37
  • 1
    How do I share the scope variables across these multiple views ? Commented Jan 15, 2015 at 3:48
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.