How to pass query parameters in ui router for AngularJS?

Question

I'm a newbie to AngularJS and am still learning about it. I have this task where I need to capture query parameter in $stateparam. Is that possible to do?

URL as follow:  https://..../details?param1=abc&param2=10

In my ui route, I have this:
        $stateProvider.state('order', {
        url : '/order',
        views : {
            "mainContent" : {
                templateUrl : 'order.html'
            }
        },
        params: {
            orderId: <how can I capture param1 value here?>,
            orderQuantity: <how can I capture param2 value here?>
        }
    });

If not, what is other way where I can assign query param as $stateparam? This can be easily achieve if I assign parameter here

url : '/order/:param1/:param2'

But this also means my URL would be as such and I don't want that

https://..../details?param1=abc&param2=10#!/order/abc/10

By the way, they need to be passed $stateparam as they are required for downstream and I can't modify the code.

Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Mar 30 '18 at 18:12
It was already edited, and this will have been notified to you in your notifications in-tray. [We tend to trim out thanks/TIA too](https://meta.stackoverflow.com/questions/288160/no-thanks-damn-it) - thanks is best expressed in upvotes and answer acceptances. — halfer, Mar 30 '18 at 18:16
Possible duplicate of [UI Router and query parameters](https://stackoverflow.com/questions/42258522/ui-router-and-query-parameters) — Heretic Monkey, Mar 30 '18 at 18:18
Because further downstream, we are calling state.params.param1 and state.param.param2 and since I can’t modify the code downstream, I want to pass to them as $stateparams to make things easy. Hope this clarifies. — J.TrLu, Mar 30 '18 at 19:27

score 2 · Answer 1 · answered Mar 30 '18 at 21:46

Use ? in your url

$stateProvider.state('order', {
     url : '/order?:orderId&:orderQuantity',
     views : {
        "mainContent" : {
           templateUrl : 'order.html'
         }
     }

Url will be https://..../details?orderId=123&orderQuantity=10

How to pass query parameters in ui router for AngularJS?

1 Answers1