Multiple Views into a parent view using Angular UI-Router

Question

I am using Angularjs UI-Router to create a view with 3 child views (header, a main content area, and a footer).

I have defined the route-state for the parent view but i do not know how I can define the state to automatically load the child views on it.

 $stateProvider
     .state('index',
            {
                url: '/index',
                templateUrl: 'AngularJS/Templates/indexView.html',
                controller: 'indexController'    
            });

and my indexView.html looks like this:

<div class="row">
<div class="col-md-6 col-md-offset-3">
    <a ui-sref="index.detail">Here</a>
    <div data-ng-controller="indexController as vm">
        <div ui-view="header"></div>
        <div ui-view="content"></div>
        <div ui-view="footer"></div>

    </div>
</div>

I would expect that something like this works, but it does not:

.state('index',
{
    url: '/index',
    templateUrl: 'AngularJS/Templates/indexView.html',
    controller: 'indexController'
    views: {
     'header': {
         templateUrl: '/AngularJS/Templates/headerView.html',
         controller: 'HeaderController'
     },
     'content': {
         templateUrl: '/AngularJS/Templates/contentView.html',
         controller: 'ContentController'
     },
     'footer': {
         templateUrl: '/AngularJS/Templates/footerView.html',
         controller: 'FooterController'
     }
 }
});

I would appreciate any help.

Answer 1

There is a similar Q & A with a working plunker:

Nested states or views for layout with leftbar in ui-router?

You are almost there. just, the first view (unnamed) will be the target for others.. so we have use a bit different syntax

.state('index',
{
    url: '/index',
    //templateUrl: 'AngularJS/Templates/indexView.html',
    //controller: 'indexController'
    views: {
     '': {
        templateUrl: 'AngularJS/Templates/indexView.html',
        controller: 'indexController'
     },
     'header@index': {
         templateUrl: '/AngularJS/Templates/headerView.html',
         controller: 'HeaderController'
     },
     'content@index': {
         templateUrl: '/AngularJS/Templates/contentView.html',
         controller: 'ContentController'
     },
     'footer@index': {
         templateUrl: '/AngularJS/Templates/footerView.html',
         controller: 'FooterController'
     }

What we can see (changes) is

• all views must be defined inside of the views : {}, including the unnamed. Why? Because if there is an object views ... inlined template is skipped
• sibling views are extended with absolute names suffix @index - that says, that their target is not in the root index.html, but inside of one of already loaded views of current state