CODEWITHSUNDEEP
angularjsangular-ui-router
J.TrLu
J.TrLu

Reputation: 65

How to pass query parameters in ui router for AngularJS?

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.

Upvotes: 0

Views: 2233

Answers (1)

Ihor Yanovchyk
Ihor Yanovchyk

Reputation: 786

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

Upvotes: 2

Related Questions