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? - 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
– halfer, Commented Mar 30, 2018 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 - thanks is best expressed in upvotes and answer acceptances. — halfer
– halfer, Commented Mar 30, 2018 at 18:16

Ihor Yanovchyk · Accepted Answer · 2018-03-30 21:46:30Z

2

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

answered Mar 30, 2018 at 21:46

Ihor Yanovchyk

7866 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

How to pass query parameters in ui router for AngularJS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related