Dynamic URL name with Angularjs and Ui-Router

Question

I'm working with AngularJs and Ui-Router in my webapp. I've come to a point where I want to make it more dynamic. This is the situation I'm facing:

I have a list of cities;
Each city has a list with a lot of business;

What i want is:

When i select the city "New York", for example, I'd like to set the URL to be: mysite.com/#/new-york
And when i access one business whitin the NewYork city, I'd like it to be something like: mysite.com/#/new-york/name-business

Currently I'm only passing the city Id so I get it as an URL param and then I get the business list based on this ID param.

This is the code I'm currently using:

//City
.state('city', {
    url: "/City",
    views: {
        "main": {
            controller: 'CityCtrl',
            templateUrl: "content/section/city/city.html"
        }
    }
})

//Business
.state('business', {
    url: "/Business/:idparam",
    views: {
        "main": {
            controller: 'BusinessCtrl',
            templateUrl: "content/section/business/business.html"
        }
    }
})

Very simple. But instead of using the URL like url: "/Cities" I'd like it to be a dynamic url, based on the city name the user selects.

Is it possible to do it with ui-router? Because i didn't found anything about this in the docs.

If so, what should I do to achieve this result?

Edit:

I'm trying the solution on the answer by @Anid Monsur but the param value in the URL is 0 even tought it's a name. For example: site.com/#/0 instead of site.com/#/city-name

This is what i did:

.state('city', {
    abstract: true,
    url: "/:name",
    views: {
        "main": {
            controller: 'CityCtrl',
            templateUrl: "content/section/city/city.html"
        }
    }
})

And my link is:

ui-sref="city({name: {{city.nm_url}} })"

Any ideas why the value is 0?

Edit2

Because i was passing a string value instead of int, i had to remove {{ }} from the link and it solved my issue = ui-sref="city({name: city.nm_url })"

just add another path segment and stateParam. Suggest you create url slugs for the names — charlietfl
– charlietfl, Commented Oct 28, 2015 at 0:15
I had tried this before, but i think it didn't worked because of the way the string was sent to the url. I don't know. Now I'm getting it to work. — celsomtrindade
– celsomtrindade, Commented Oct 28, 2015 at 0:38

Anid Monsur · Accepted Answer · 2015-10-28 00:27:19Z

4

Here's the easiest way to achieve your goal. Use child states so that each successive child appends segments to the url.

The city state will have a blank url.
Once a city is selected, the city.business state is active with a url of /city where city is a $stateParam, set to new-york, for example.
After a business is selected, the city.business.view state is active with a url of /city/business where city is the same one as above, and business would be the business identifier.

State config:

//City list
.state('city', {
    url: "/",
    views: {
        "main": {
            controller: 'CityCtrl',
            templateUrl: "content/section/city/city.html"
        }
    }
})

//Business list for one city
.state('city.business', {
    url: "/:city",
    views: {
        "main": {
            controller: 'BusinessCtrl',
            templateUrl: "content/section/business/business.html"
        }
    }
})

// Specific Business
.state('city.business.view', {
    url: "/:business",
    views: {
        "main": {
            controller: 'BusinessCtrl',
            templateUrl: "content/section/business/business.html"
        }
    }
});

answered Oct 28, 2015 at 0:27

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

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

1 Comment

celsomtrindade Over a year ago

My structure is a little different, but now I know how to proced in a better way! Thank you sr.

Collectives™ on Stack Overflow

Dynamic URL name with Angularjs and Ui-Router

What i want is:

Edit:

Edit2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What i want is:

Edit:

Edit2

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related