WebDev WebDev - 3 months ago 19
AngularJS Question

query parameters not working with ui-router

I need to route to state using complete url with query parameters and perform action in controller according to query parameters.

It works fine if I use simple routing url with variables like : "/load/:portName/:id"

It doesn't work if I will add queryparameters : "/load?portName&id"

Above should be accessible with url : "/load?portName=TEST&id=343"

I am posting my code snippet below for routes and controller defined in html:

$stateProvider
.state('route0', {
url:"/",
templateUrl: '/one.html'
})
.state('route1', {
url:"/starZoom",
templateUrl: '/two.html'
})
.state('route2', {
url: "/:name",
templateUrl: function (urlattr) {
return '/app/' + urlattr.name + '/' + urlattr.name + '.html';
}
})
.state('route3', {
url:"/load?portName&id",
views: {
templateUrl: '/one.html'
}
});


HTML :

<div class="viewPanel"
ng-controller="StatusSearchController as searchController"
id="searchStatusContainer"> ....</div>


versions of angular and ui-router :
"angular": "1.4.10",
"angular-sanitize": "1.4.10",
"angular-ui-router": "0.2.10"

I want to directly load route3 using url : localhost:4000/load?portName=test&id=45
Thanks

Answer

There is a working example

Switch the state definitions.. firstly the more specific, next the general

  .state('route3', {
    url:"/load?portName&id",
    templateUrl: 'tpl.html',
  })
  .state('route2', {
    url: "/:name",
    templateUrl: 'tpl.html',
  })

These will work now

<a href="#/starZoom">
<a href="#/name">
<a href="#/load?portName=test&amp;id=45">

So, /:name would also match /load, but if /load is defined first, it will be used...

Check it here