query parameters not working with ui-router

Question

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 8, 2016 at 10:23

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

5 Comments

Pooja Bansal Over a year ago

Thanks!! Run block was missing :)

Pooja Bansal Over a year ago

But, I am curious. I never used that run block earlier even with nested states.

Radim Köhler Over a year ago

I would bet, that in this case, it was just a side effect. The most important is the order. You can play with my plunker, and set the route3 after route2 ... and it will never be reached... hope it helps a bit...

Pooja Bansal Over a year ago

Yeah I agree order of states matters but it was not working for me even after updating the order till I added the run block.

Radim Köhler Over a year ago

As I say, I would bet on some side effect.. because in the plunker above, run block is just to set some stuff in $rootscope (params etc)... other words, it all would work without it. Please, try it (play with in that plunker)

Collectives™ on Stack Overflow

query parameters not working with ui-router

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related