AngularJS UI Router shared nested routes/states

Question

I'm looking to share a child state between multiple states. For example I have a shopping site.

Lets say I have the following

.com/random
.com/browse
.com/browse/product/:productID
.com/browse/:search/product/:productID

however I also have a shopping cart using a modal from ui-bootstrap.

Now I know how create

.com/browse/shoppingCart
.com/random/shoppingCart

and have them include the same service modal to share the code but I want a deep linkable shopping cart on every page that works with the back button to close it. so how can I do

.com/*/shoppingCart

without having to manually add a nested state to every single state?

I am using onEnter in the shopping cart to open the modal.

score 2 · Accepted Answer · answered Aug 06 '14 at 09:34

I do not think it is possible to have a state match /*/shoppingCart, because the mapping between states and URLs should be one-to-one.

However, manually adding a nested shopping-cart state to every state may not be that bad. Just make a function for it, e.g this code in your $stateProvider config:

//function for adding a child shoopingCart state to a state
function addShoppingCartState (stateName) {
  $stateProvider.state(stateName + '.shoppingCart', {
    url: '/shoppingCart',
    templateUrl: 'views/shopping-cart.html',
    data: {
      parentStateName: stateName // for use in the controller
    },
    controller: 'MyShoppingCartController'
  });
}
// Add a child shoppingCart state to all the states you want.
['random','browse','browse.product','browse.search'].forEach(addShoppingCartState);

AngularJS UI Router shared nested routes/states

1 Answers1