Angularjs $location service apparently not parsing url?

Question

I'm using angular in an application which is, basically, a table with search results. Access to this table can be achieved via an url like http://myapp/?client=clientName

An angular controller is instantiated for the table, among other things, for opening a modal dialog (also angular-based with bootstrap-ui) with the row details.

These row details are brought via a service which has some common functionality for both controllers: the one for the table and the one for the modal.

Now, within this service, I have the following snippet to retrieve:

service.fetchRelatedElements = function(element, cb) {
  var url = '/search.json?results=20&type='+element.type;
  if ($location.search()['client']) {
    url += '&client=' + $location.search('client');
  }
  return doFetch(url, cb); // actual server json GET
};

The goal is to know if the table already has this specific client parameter set as a filter.

If I put a breakpoint at the beginning of this call, I see that $location.absUrl() returns the current browser URL (which, in my case, has the client parameter I'm interested in).

But $location.search() returns an empty object.

I am injecting the $location service within my service with the defaults (that is, not configuring it by a .config() call). And, as doc says:

The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application.

Am I missing something? Shouldn't the URL, at this point, be parsed?

Thanks!

UPDATE: I've managed to make it work. The problem was exactly that I wasn't configuring at all the service. I did so because I assumed that in that way it would take defaults, but it seems that that's not the way it works.

Can you share the output of $location.absUrl()? This smells like a regexp problem. — Jmr
– Jmr, Commented Apr 29, 2013 at 21:24
Sure! It's http://localhost:3000/results?utf8=%E2%9C%93&client=mond&type=&submittedLowerBound=&submittedUpperBound=&commit=Filter. It's a rails app on the backend. — Pipetus
– Pipetus, Commented Apr 29, 2013 at 21:37
Can you share some code for your solution? Im having the same issue where $location.search() returns {} — sthomps
– sthomps, Commented May 16, 2013 at 1:35

Riley Lark · Accepted Answer · 2014-04-01 18:57:30Z

43

I was having the same problem before I configured $locationProvider in my app's module config:

appModule.config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(true);
    }]);

edited Apr 1, 2014 at 18:57

answered Oct 18, 2013 at 1:44

Riley Lark

20.9k15 gold badges86 silver badges130 bronze badges

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

3 Comments

Karol F Over a year ago

with that way angular will fallback to the hashbang url if the browser not supports html5 mode, by the way someone knows how to get query params without html5 mode and router in angular?

Angel Gao Over a year ago

Note also that when you set it to html5Mode, you must also have a base tag in the html file.

Sámal Rasmussen Over a year ago

Also note you may need to add $locationProvider.hashPrefix(''); docs.angularjs.org/guide/migration#commit-aa077e8

Peter O. · Accepted Answer · 2015-06-15 23:27:47Z

12

If you don't want to specify the base tag, you can specify require base false.

myapp.config(function($locationProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
});

edited Jun 15, 2015 at 23:27

Peter O.

33.1k14 gold badges86 silver badges97 bronze badges

answered Jun 15, 2015 at 23:17

Pung Worathiti Manosroi

1,4901 gold badge20 silver badges25 bronze badges

Comments

Angel Gao · Accepted Answer · 2015-02-20 21:35:25Z

5

When I encountered this problem, another thing that worked for me besides setting the configuration is to add "#" in front of the query string.

So if you are the one creating the query string, then changing
myapp/?client=clientName
to
myapp/#?client=clientName

allowed $location.search() to give me a non-empty object which you can then access each parameter using $location.search()['client']

answered Feb 20, 2015 at 21:35

Angel Gao

4781 gold badge5 silver badges12 bronze badges

1 Comment

under5hell Over a year ago

Thanks. This comment should be in the official documentation. :)

Jmr · Accepted Answer · 2013-04-29 21:57:54Z

4

The API for $location.search is pretty confusing. Calling

$location.search('client');

will set the search object to {client: true} and return $location. Furthermore, you have a typo client instead of 'client', so it's setting search to an empty object. So you probably want:

url += '&client=' + $location.search()['client'];

answered Apr 29, 2013 at 21:57

Jmr

12.1k4 gold badges41 silver badges33 bronze badges

2 Comments

Pipetus Over a year ago

Thanks, Jmr, I fixed the typo. But the important thing is that, at that point, $location.search() returns just {}.

Jmr Over a year ago

Sorry, I missed that you had put the breakpoint at the beginning of the question, I thought maybe $location.search(client) was overriding it. In that case I'm not sure what's going on, $location.search() parses your URL fine on my machine.

Archimedes Trajano · Accepted Answer · 2014-10-21 04:07:40Z

3

You can write a function that parses the $window.location.search based on this comment https://github.com/angular/angular.js/issues/7239#issuecomment-42047533

function parseLocation(location) {
    var pairs = location.substring(1).split("&");
    var obj = {};
    var pair;
    var i;

    for (i in pairs) {
        if (pairs[i] === "")
            continue;

        pair = pairs[i].split("=");
        obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }

    return obj;
}

$scope.query = parseLocation($window.location.search)['query'];

answered Oct 21, 2014 at 4:07

Archimedes Trajano

43.2k29 gold badges222 silver badges372 bronze badges

Collectives™ on Stack Overflow

Angularjs $location service apparently not parsing url?

5 Answers 5

3 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related