Several query string parameters in angularjs

Question

I am struggling with passing and reading several query string parameters in a route.

$routeProvider.when("/joboffers:keywords:location", { controller: "jobOffersController", templateUrl: "/App/Views/JobOffer/All.html" }); 

This is the search page:

 $scope.searchJobOffer = function () { var vm = $scope.jobOfferSearchViewModel; var path = "/joboffers?keywords=" +( vm.keywords || "") + "&location=" + (vm.location || ""); $location.path(path); } 

And this is the JobOffersController:

 'use strict'; app.controller('jobOffersController', ['$scope', '$routeParams', 'jobOfferService', function ($scope, $routeParams, jobOfferService) { $scope.jobOffers = []; function init() { var keywords = $routeParams.keywords; var location = $routeParams.location; } init(); }]); 

Reading $ routeParams does not work at all. If I pass “developer” as a keyword and “New York” as a location, the $ routeParam object looks like this:

 {keywords: "?keywords=developer&location=New Yor", location: "k"} 

Can someone tell me what I'm doing wrong? Thanks in advance.

PS Is it possible that this is due to an incorrectly configured route? When I navigate through the searchJobOffer function, it encodes the URL: http://localhost:49380/#/joboffers%3Fkeywords=developer&location=london , and if I try to use this url http://localhost:49380/#/joboffers?keywords=developer&location=london , the routing system changes to the default route (# / home)

Answer 1

$ routeProvider does not match query strings, but only routes. In addition, you set the full url to $ location.path (), and $ location.path () only accepts the path fragment. To set the entire URL, including the query string, you need to use $location.url() .

Here are a few options:

1. Use beautiful URLs instead

 $routeProvider.when("/joboffers/:location/:keywords", { controller: "jobOffersController", templateUrl: "/App/Views/JobOffer/All.html" }); $scope.searchJobOffer = function () { var vm = $scope.jobOfferSearchViewModel; var path = "/joboffers/" + (vm.location || "") + "/" + ( vm.keywords || ""); $location.path(path); }; app.controller('jobOffersController', ['$scope', '$routeParams', 'jobOfferService', function ($scope, $routeParams, jobOfferService) { $scope.jobOffers = []; function init() { var keywords = $routeParams.keywords; var location = $routeParams.location; } init(); }]); 

2. Only a match on a job offers a path and pulls parameters from $ location.search ()

(note the use of $location.url() instead of $location.path() )

 $routeProvider.when("/joboffers", { controller: "jobOffersController", templateUrl: "/App/Views/JobOffer/All.html" }); $scope.searchJobOffer = function () { var vm = $scope.jobOfferSearchViewModel; var url = "/joboffers?keywords=" +( vm.keywords || "") + "&location=" + (vm.location || ""); $location.url(url); }; app.controller('jobOffersController', ['$scope', '$location', 'jobOfferService', function ($scope, $location, jobOfferService) { $scope.jobOffers = []; function init() { var search = $location.search(); var keywords = search.keywords; var location = search.location; } init(); }]); 

3. If you need to match the route and the query string, try something more reliable, for example angular -ui-router

 $stateProvider.state("JobOffers", { url: '/joboffers?keywords&location', controller: "jobOffersController", templateUrl: "/App/Views/JobOffer/All.html" }); $scope.searchJobOffer = function () { var vm = $scope.jobOfferSearchViewModel; var url = "/joboffers?keywords=" +( vm.keywords || "") + "&location=" + (vm.location || ""); $location.url(url); }; app.controller('jobOffersController', ['$scope', '$stateParams', 'jobOfferService', function ($scope, $stateParams, jobOfferService) { $scope.jobOffers = []; function init() { var keywords = $stateParams.keywords; var location = $stateParams.location; } init(); }]);