Build query string from parameters object

Question

How to build a url with query parameters in Angularjs.

I see the API $location.search()

the problem is $location(url) is to redirect to the url. In my case,

Answer 1

angular's internal and external URL formatting rules are slightly different.

The $location is a means of activating internal routes within your own application.

If it is an external link then $http is what you want.

If it is an internal link, then check it might be worth checking the hash/bang syntax.

Answer 2

There is a nice solution as of 1.4+. You can build a query string from a parameters object with $httpParamSerializer :

var qs = $httpParamSerializer(params);

See docs here

Default $http params serializer that converts objects to strings according to the following rules:

{'foo': 'bar'} results in foo=bar
{'foo': Date.now()} results in foo=2015-04-01T09%3A50%3A49.262Z (toISOString() and encoded representation of a Date object)
{'foo': ['bar', 'baz']} results in foo=bar&foo=baz (repeated key for each array element)
{'foo': {'bar':'baz'}} results in foo=%7B%22bar%22%3A%22baz%22%7D" (stringified and encoded representation of an object)
Note that serializer will sort the request parameters alphabetically.

Answer 3

Angular uses the buildUrl() function internally to make a query string from an object of parameters. For now it's impossible to use it in your code because it's private to $HttpProvider unless you want to do some eval() magic.

Related issues on github:

• https://github.com/angular/angular.js/pull/3213
• https://github.com/angular/angular.js/pull/2701

Answer 4

Believe you really are sort of barking up the wrong tree... you need to take a look at $http service which gives you $http.get(url, config) or $http.post(url, data, config). For a GET request with parameters see the following SO

$http get parameters does not work

For information about $http and how it works see the Angular docs.

http://docs.angularjs.org/api/ng.$http

Perhaps I'm misunderstanding the goal though and you actually want to navigate to a different place, what I suggest here is just to make the request in the background (AJAX style).

http://jsfiddle.net/4ZcUW/

The JS

angular.module("myApp", []).controller("MyCtrl", ["$scope", "$window", function($scope, $window) {
    $scope.goPlaces = function(url, parameter) {
        $window.open("http://www."+url+"?q="+parameter);
        //$window.open("http://www."+url+"?q="+parameter, "_self");
        //$window.open("http://www."+url+"?q="+parameter, "_top");
    };
}])

The HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <a href="#" ng-click="goPlaces('google.com','Shaun Husain')">Find me</a>
</div>

Does this work for your case?