AngularJS: UI Router nested routes with un-nested views?

Question

I'm trying to use angular ui-router in my project and I'm running into an issue..

I want to have the following routes: /home, /home/:collection, /home/:collection/:item

So this is my current code:

$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'IndexCtrl'
    })

    .state('home.collection', {
        url: '/:collection',
        templateUrl: 'views/home.collection.html',
        controller: 'CollectionCtrl'
    })

    .state('home.collection.item', {
        url: '/:item',
        templateUrl: 'views/home.item.html',
        controller: 'ItemCtrl'
    });

$urlRouterProvider.otherwise('/home');

Is there a way to use the following structure with ui-router (this represents the home view):

<div id="hero" class="container">
    <h1>Welcome, select an item below</h1>
</div>

<div id="collection-selector">
    <ul>
        <li ng-repeat="collection in collections">
            <a href="#/{{collection}}">{{collection}}</a>
        </li>
    </ul>
    <!-- collection view -->
    <div ui-view id="item-selector"></div>
</div>

<div id="item-details" ng-if="item.selected">
    <!-- item view -->
    <div ui-view></div>
</div>

So the first view would represent /home/:collection and then if the user navigates to /home/collection/:item then I can use some logic to have the item detail pane appear below it. I've only managed to get it working by nesting the item view inside the collection view, which is obviously expected behavior, but I was hoping there would be a work around to unnest the views, but have the routing nested.

Right now, if I put my collection picker inside the ui-view then it won't show the picker on the /home route, which is an issue. And the styles associated with the collection picker and the detail view is very different and disconnected so I don't want to have to nest them if I can avoid it.

I might be taking the completely wrong approach to this problem and if I am please inform me.

Neil · Accepted Answer · 2014-02-13 20:24:35Z

1

Ah, I found the answer, if you use the views property in the router, you can target which view will pickup the view... as butchered as that sounds... here is the code:

.state('home', {
    url: '/home',
    templateUrl: 'views/home.html',
    controller: 'IndexCtrl'
})

.state('home.collection', {
    url: '/:collection',
    templateUrl: 'views/home.collection.html',
    controller: 'CollectionCtrl'
})

.state('home.collection.item', {
    url: '/:item',
    views: {
         "item@home" : {
            templateUrl: 'views/home.item.html',
            controller: 'ItemCtrl'
         }
     }
});

And then the additiona HTML which will appear in the views/home.html page:

<div ui-view="item" />

So when I navigate to /home/:collection/:item the item will appear in the view that is placed on the views/home.html

answered Feb 13, 2014 at 20:24

Neil

2,5197 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: UI Router nested routes with un-nested views?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related