Why is AngularJS duplicating the query string in m

Question

I am using hash-based navigation in my AngularJS app rooted at /.

If a user navigates to my app like this:

http://example.com/?foo

A moment after the page loads, something (possibly Angular) is causing the address bar to look different than I expected.

What I saw:

http://example.com/?foo#/?foo

What I expected to see:

http://example.com/?foo#/

Why is this happening, and can I turn it off?

Answer 1

I'd wager you need to be in 'html5 mode' to not have the hash fragment... though I'm uncertain.

http://docs.angularjs.org/guide/dev_guide.services.$location

$locationProvider.html5Mode(true).hashPrefix('!');

In your app configuration, you can mess with that config param and it'd probably get rid of it.

Answer 2

This appears to be duplicating the hash with the path.

Check out the $location service. It has both path() and hash() methods. The second, duplicated part is the hash, the first part is the path.

Answer 3

Unless you are using html5 mode, all of Angular's part of the URL appears in the fragment. The problem is that Angular doesn't know about the base part of the URL (perhaps the ?foo was needed just to get Angular to load) so it won't attempt to manipulate it, it just puts its own stuff on as a fragment.

I suggest the best thing would be to check $window.location.search for a query string, and if you find one do the redirect to the URL you actually want yourself. You'll still need to do that redirect by assigning to $window.location rather than $location and it will force your angular app to reload but at least you'll end up where you want to get to.

Alternatively you could reconfigure your web server to make the appropriate rewrite, but you may not want to or be able to do that.

Or you tell your users to only use URLs they got from the app, not to try to make them up for themselves.