Angular ui-router extend url after path parameter

Question

Is this type of routing is possible with ui-router ?

parent state ---> /saved/:id child state ---> /saved/:id/eat

Bellow is my code snippet. Why I try to do this the page is redirected to route.

 .state('frouits.banana.saved', {
        url: '/saved/:id',
        views: {
          parameters: {
            templateUrl: 'banana.html'
          }
        }
      })state('frouits.banana.saved.eat', {
        url: '/saved/:id/eat',
        views: {
          parameters: {
            templateUrl: 'banana.html'
          }
        }
      })

charlespwd · Accepted Answer · 2015-12-11 14:41:35Z

2

By default, nested routes in UI-Router are appended. Since frouits.banana.saved.eat is a nested view of frouits.banana.saved, it inherits its url, which means your route resolved to /saved/:id/saved/:id/eat

Thus, all you need to do is remove the /saved/:id part from your second route's url.

.state('frouits.banana.saved.eat', {
    url: '/eat', // <--
    views: {
      parameters: {
        templateUrl: 'banana.html'
      }
    }
 });

The other way that you could have made your initial example work would have been to declare your route as absolute by prepending a caret before your route (url: '^/saved/:id/eat').

For more information on how nested routes work, refer to the docs.

answered Dec 11, 2015 at 14:41

charlespwd

5385 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Angular ui-router extend url after path parameter

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