GET Params in AngularJS Route URL

Question

In my Angular application, I am showing a list of inventory items. On this page, there is a form to filter or perform a search. This form submits to the same url for the current route template/page, but appends get parameters in the url to perform the filter/search. i.e. /#/inventories, and /#/inventories?keywords=widgetname

Here is the basic route...

myApp.config(function($routeProvider) {
    $routeProvider

    .when('/inventories', {
        templateUrl: '/inventories.html',
        controller: 'inventoriesController'
    })
});

I know I could do something like the example below for a route with a variable parameter like /#/inventories/12 for a particular inventory resource, like so...

.when('/inventories/:inventory_id', {
    templateUrl: function(params) { return '/inventories/' + params.inventory_id + '.html'},
    controller: 'inventoryController'
})

But what would I do for a route like /#/inventories?keywords=widgetname&warehouse=1&min_qty=5 which contains all of my filter parameters in the url string? How do I accommodate url GET parameters in the route?

I tried something like this, but doesn't work...

.when('/inventories?:get_params', {
    templateUrl: function(params) { return '/inventories?' + params.get_params},
    controller: 'inventoryController'
})

I know that I could try using $http service and work with json by tying an array of results on the scope to an ng-repeat or something like that, but I would rather just refetch the template returned with the filtered results from url. Is this possible?

you could add number of params in your route like /inventories/:inventory_id/:keywords/:warehouse/:min_qty so that you could access the same using params only — Pankaj Parkar
– Pankaj Parkar, Commented Aug 8, 2015 at 13:06

just95 · Accepted Answer · 2015-08-08 13:21:45Z

1

You should be able to access the query parameters from the params attribute just like regular route parameters. If you have the URL /inventories?keywords=widgetname the value of params.keywords should therefore be 'widgetname'.

I wrote a fiddle to demonstrate this. I tested only with template but I am sure it will work the same with templateUrl.

answered Aug 8, 2015 at 13:21

just95

1,0998 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

GET Params in AngularJS Route URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related