Creating layouts with multiple nested views using angular-ui-router

Question

I have tried several examples on using the ui-router and the state manager. My nested views and routes are not working as I hoped. Here is an example of how I am configuring the states:

          $stateProvider                
            .state("main", {
                abstract: true,
                url: "/main",
                views: {
                    "layout": {
                        templateUrl: "main.index.html"
                    },
                    "mainNavigation@main": {
                        templateUrl: "main-navigation-partial.html"
                    }
                },
                onEnter: function() {
                    console.log("enter main");
                }
            })
            .state("main.dashboard", {
                url: "/dashboard",

                views: {
                    "container@main": {
                        templateUrl:"main-dashboard.html"
                    }
                }
            });

As you can see, I have an abstract state named main. All main views will use the mainNavigation view. There is also a container view area where the content for each section will reside. There is an index.html that will be used by all states. So, I may, down the road have an abstract state name client with accompanying states and views.

I can see the individual html files being loaded, but the views are not being populated in the correct named view areas. I have created a plunk that demonstrates how I want to manage my templates and views.

Answer 1

Your main state is loading main.index.html into a ui-view named layout. In your plunker, your root ui-view is unnamed. So to fix this, add a name to that ui-view.

http://plnkr.co/edit/xKDcuk99OACQR73LR0hf?p=preview

<div ui-view='layout'>

Or, you could leave the ui-view unnamed and change the view to reflect that.

"": {
  templateUrl: "main.index.html"
}

For more on view naming, see the ui-router wiki.