Nested Views As Home "/" Route

[Roycohen]

Hi There,

I have a small question which I can't resolve.
How can I defined several routes and make them abstract and set the "/" of the application to be some nested route.
Example:
This is the ui-view that I want to return from index.html
''

Now I want that this ui-view will have a route which expose 3-4 more ui-views and this will be the "/" root url.

{
    name: "root", // This should take the above ui-view.
    views: {
        root: { component: LayoutComponent }
    }
},
{
    name: "root.layout",
    url: "/",
    views: {
        header: { component: HeaderComponent },
        sidebar: { component: SidebarComponent },
        content: { component: ContentComponent },
        footer: { component: FooterComponent }
    }
},

LayoutComponent - has 4 ui-views with the header/sidebar,etc...
So the application should start from root.layout.

Thanks, I will really appreciate help in this matter.

[demisx]

This should work. If you create a plunker (https://plnkr.co) to demo the problem, it would be easier for others to fix it. Also, if root state was never meant to be transitioned to, define it as an "abstract" state by adding abstract: true object property.