Angular UI Router ui-sref nesting

Question

Currently building an online shop in angular. Structure is as follows

Store page - Category - Product

.state('shop', {
        url: '/shop'

.state('shop.category', {
        url: '/:slug'

.state('shop.category.product', {
        url: '/:slug'

I then use <a ui-sref=".category({slug: cat.slug})">{{ foo }}</a> to link from the shop page to the category page. this works fine. However how do I link from the category page to a product?

As you can imagine I want to keep the URL to look like this

www.site.c@m/shop/dynamic-category/dynamic-product

Pankaj Parkar · Accepted Answer · 2016-02-19 21:05:39Z

1

You should use, like .product will tell router that I want to go in child state & will pass slug value.

ui-sref=".product({slug: 'some-product'})"

But technically you should not have parameter slug in both child and parent state. because when you want to directly navigate to child state at that time whole thing will get messed up.

Like when you do shop.category.product({slug: 'some-cat', slug: 'some-product'}) at that time you can have slug property in same json, javascript wouldn't get compile correctly.

So I'll suggest you have different name on each state for slug parameter like below

.state('shop', {
        url: '/shop'

.state('shop.category', {
        url: '/:catslug'

.state('shop.category.product', {
        url: '/:productslug'

edited Feb 19, 2016 at 21:05

answered Feb 19, 2016 at 21:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Richy Over a year ago

You wouldnt know how I can link to a product from the homepage? I cant get the category paramater in the URL

Pankaj Parkar Over a year ago

See I had simplified state to have it accessible by anytime..I generally have that pattern..so that from anywhere I can redirect to that state.. But yes, you're correct. Somehow we should have catsslug and product available

Collectives™ on Stack Overflow

Angular UI Router ui-sref nesting

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related