Multiple named views not showing

Question

I'm trying to build from scratch a very simple angular app using ui-router.
Every page will have the same appearance, and will have the following 4 sections (vertically, from top to bottom):

HEADER (common to all pages)
HORIZONTAL MENU (common to all pages)
CONTENT (this is the only content that will change)
FOOTER (common to all pages)

My index.html has <div ui-view></div> inside the <body> tag.

I also have a simple html file (portal.html) that contains the structure of every page:

<div ui-view="header"></div>
<div ui-view="menu"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>

I've have created a parent state, where I set the common sections to every page:

$stateProvider
  .state('portal', {
    url: '/portal',
    templateUrl: 'app/main/portal.html',
    views: {
      header: {
        templateUrl: 'app/main/section/header.html'
      },
      menu: {
        templateUrl: 'app/main/section/menu.html'
      },
      footer: {
        templateUrl: 'app/main/section/footer.html'
      }
    }
  });

And some child states (one for each menu option - page), where I set the variable content to every page:

$stateProvider
  .state('portal.home', {
    url: '/home',
    views: {
      'content@portal': {
        controller: 'HomeCtrl as homeVM',
        templateUrl: 'app/portal/home.html'
      }
    },
    resolve: { /* whatever */ }
  })

  // ... and so on ...

  .state('portal.contactUs', {
    url: '/contact-us',
    views: {
      'content@portal': {
        controller: 'ContactUsCtrl as contactUsVM',
        templateUrl: 'app/portal/contactUs.html'
      }
    },
    resolve: { /* whatever */ }
  });

But this won't display anything on screen... Am I missing something here?

I have been researching a little bit, trying different things and lately figured out that what might be causing trouble is the `views` property at the state configuration object passed into `$stateProvider.state()`. I wanted it that way to avoid setting those common views `N` times in every child state... — charliebrownie, Nov 11 '16 at 11:44

score 1 · Accepted Answer · edited May 23 '17 at 10:32

I finally found a solution. What actually helped me was this StackOverflow post, that is quite similar to mine, and specially the plunker example shown there.

The mistake was in the state configuration object passed to the $stateProvider.state(). The parent state should be set the following way:

$stateProvider
  .state('portal', {
    url: '/portal',
    views: {
      '@': {
        templateUrl: 'app/main/portal.html'
      },
      'header@portal': {
        templateUrl: 'app/main/public/header.html'
      },
      'menu@portal': {
        templateUrl: 'app/main/public/menu.html'
      },
      'footer@portal': {
        templateUrl: 'app/main/public/footer.html'
      }
    }
  });

Multiple named views not showing

1 Answers1