CODEWITHSUNDEEP
angularjsangular-ui-routerstateui-sref
Sumesh Kuttan
Sumesh Kuttan

Reputation: 1353

Angular UI Router with multiple optional parameters

I have a state route as follows :

.state("hospitals",
{
    url: "/hospitals/:categoryName/:providerName",
    templateUrl: "app/components/hospital/views/hospitals.html"
})

In general,hospitals pages have all the hospitals with all categories and all provider(hospital) group. In addition, from home page we can navigate to the hospitals page using the category or provider which will show hospitals based on category and provider group respectively. For these, I navigate using the following directives inside anchor tag.

ui-sref="hospitals({categoryName: category.KeyName})"
ui-sref="hospitals({providerName: provider.KeyName})"

So, this introduces a dirty slash when navigating with providerName.

hospitals//somehopitalNme

It is fine with category.

coupons/heart/

Once inside the hospitals page, I can search using category or providerName and get the list of hospitals. I was thinking of modifying the url in these searches(using ui-sref for the same page) since it makes sense to show the url matching to the search. I land in a trouble here. The search is a common search and can match either providerName or category or even a text as well. In this case, how can I navigate or how to use s-ref. I am fine with not using ui-sref and just going to the api or getting the data and updating the results which is easily achievable. However, I prefer the change of url since it shows what we are looking for.

So, now I understand that the state route which I provided is not suitable.

Please provide me an approach as to how to do it.

I was thinking of adding another state called "search" for this, which makes sense. But the templateUrl for this will be the same. Please suggest if I am in right direction or not.

Upvotes: 1

Views: 1418

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123861

Check this for detailed explanation and working example

Angular UI-Router more Optional Parameters in one State

we can use so called squash setting of the params : {} object:

.state("hospitals",
{
    url: "/hospitals/:categoryName/:providerName",
    templateUrl: "app/components/hospital/views/hospitals.html",
    params: {
      providerName: { squash: true },
      categoryName: { squash: true },
    },
})

Also check these:

Upvotes: 3

Related Questions