CODEWITHSUNDEEP
angularjsangular-ui-router
celsomtrindade
celsomtrindade

Reputation: 4671

Dynamic URL name with Angularjs and Ui-Router

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:

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 })"

Upvotes: 1

Views: 1419

Answers (1)

Anid Monsur
Anid Monsur

Reputation: 4538

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"
        }
    }
});

Upvotes: 4

Related Questions