null is getting returned when $location.search is used

Question

I am using $location.search to get the params from the url but it gives a null. My url is http://localhost/Site/?user=12345.

app.controller('UrlController', ['$scope', '$log','$location', function($scope,$log,$location) {

    var testsearch = $location.search();
    console.log(testsearch);

}])

I want to get the value 12345 for the user by parsing the url. How this can be achieved.

how can i parse the params from the url. I checked the documentation https://docs.angularjs.org/api/ng/service/$location

http://stackoverflow.com/questions/11758079/how-to-get-the-url-parameters-using-angular-js — Vineet, Jul 07 '15 at 13:35

Darren Wainwright · Accepted Answer · 2015-07-07T13:25:03.907

2

You need to use $window

So:

var qstring = $window.location.search.substring(1);

The substring(1) just removes the ?

You can then use a function, like this one, to parse it into an object

String.prototype.parseQuerystring = function () {
    var query = {};
    var a = this.split('&');
    for (var i in a)
    {
        var b = a[i].split('=');
        query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]);
    }

    return query;

}

And call it with:

var qParts = qString.parseQuerystring();

Issues with $location

There are some known issues with $location depending on HTML5 mode etc. Where $window doesn't have this issue. E.G https://github.com/angular/angular.js/issues/7239

edited Jul 07 '15 at 13:25

answered Jul 07 '15 at 13:15

Darren Wainwright

30,247
21
76
127

@Darren how do we do it using angulars $location? – krishna_v Jul 07 '15 at 13:19
Clearly he's struggling with that. I have had the same issues and used the code in my answer to deal with it. – Darren Wainwright Jul 07 '15 at 13:19
@user2010243 - why not just inject `$window` ?? – Darren Wainwright Jul 07 '15 at 13:19
@user2010243, have you tried `$location.search().myParam` ? – Vineet Jul 07 '15 at 13:20
@user2010243, please make sure you've injected `$location` service in your controller first. I've no issue in darren's answer. He is right BDW – Vineet Jul 07 '15 at 13:20
There are a few known issues with `$location.search`, depending on how you have html5 mode setup. `$window.location.search` works - though if you want to keep flogging that horse, carry on :) – Darren Wainwright Jul 07 '15 at 13:21
Here is an example of issues with `$location.search` https://github.com/angular/angular.js/issues/7239 – Darren Wainwright Jul 07 '15 at 13:22
I didn't do that. I'm also doing the same as you've described in one of my projects. – Vineet Jul 07 '15 at 13:24
@Darren, i did not downvote. I have updated the code. The $location was already added in the controller but still it returns null. – krishna_v Jul 07 '15 at 13:26
@Vineet u mean to say use $location.search.user(). I tried that but still no value returned – krishna_v Jul 07 '15 at 13:27
@user2010243 - read my answer and try that... I also updated with some known issues. – Darren Wainwright Jul 07 '15 at 13:27
@user2010243, you should try darren's answer – Vineet Jul 07 '15 at 13:28
Isn't it a bad practice to add methods to prototypes of built-ins? http://stackoverflow.com/questions/14034180/why-is-extending-native-objects-a-bad-practice – kiswa Jul 07 '15 at 13:30
Check this out this answer http://stackoverflow.com/questions/11758079/how-to-get-the-url-parameters-using-angular-js – Vineet Jul 07 '15 at 13:35
@kiswa - I'm sure you can find "bad practice" things for most of what we can do in most languages. – Darren Wainwright Jul 07 '15 at 13:35
@Darren True. But that one has been consistently considered a no-no by JavaScript leaders. For what that's worth. – kiswa Jul 07 '15 at 13:37

Biby Cheriyan · Answer 2 · 2017-09-08T05:21:11.517

If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode():

  app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
}]);

please refer https://docs.angularjs.org/error/$location/nobase

And for getting url parameter you can use belwo in your controller. you get parameter as a array in $location.search()

var urlParameter = $location.search(); console.log(urlParameter);

null is getting returned when $location.search is used

2 Answers2