Replace URL in Angular environment

Question

I need to modify the URL after opening a new window and navigating to a state.

My starting page looks like this:
localhost:8000/startpage.html.
When it loads the URL becomes
localhost:8000/startpage.html#/.
In the new window I am navigating to a new state:
localhost:8000/startpage.html#/newstate.

What I want is to have the URL looking like this:
localhost:8000/startpage.html?project=1#/newstate.

I am getting almost correct results except that instead of replacing the URL completely it adds
?project=1#/newstate to localhost:8000/startpage.html#/.

So the result is something like this:
localhost:8000/startpage.html#/%3Fproject=903%23/newstate
while what I need is:
localhost:8000/startpage.html?project=903#/newstate

Here is some relevant code:

if ($window.history.replaceState) {
    var newUrl = '?project=903' + '#/case';
    $location.path(newUrl);
    $location.replace();
};

Seems to me I am having two problems. Extra '#/' after '.html' and the URL is encoded. Because even if I remove extra '#/' it still does not work unless I replace encoded characters with real ones. Please help.

Thanks

it's not really clear what you are trying to accomplish here. the # denotes the portion which is handled by Angular vs the portion that is being handled by the server. A URL like localhost:8000/startpage.html?project=1#/newstate suggests that you want to send project=1 to your server and have it send back a new page, which would have a new angular app, which is then directed to the newstate. This seems rather cumbersome...... — Claies
– Claies, Commented Dec 1, 2016 at 20:49

adam-beck · Accepted Answer · 2016-12-01 20:41:36Z

2

I think you are using the wrong method. You want to be using $location.url which will allow you to set the path, query, and hash values all at once. But you may be better off setting the query and hash separately because you don't need to change the entire url.

$location.search('project', '903');
$location.hash('case');

I removed the / from the hash because it isn't necessary.

Also, by default angular uses hash mode to navigate its routes. If you want to supply a hash I think you will need to turn that behavior off.

$locationProvider.html5Mode(true);

Set that in your application's configuration.

Here is a good article: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

edited Dec 1, 2016 at 20:41

answered Dec 1, 2016 at 20:33

adam-beck

6,0295 gold badges22 silver badges35 bronze badges

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

6 Comments

Mark Over a year ago

No, then it looks like this: localhost:8000/startpage.html#/case?project=903#%2Fcase

adam-beck Over a year ago

Are you accidentally adding the # manually when calling $location.hash?

Mark Over a year ago

No, I have just these two lines: $location.search('project', '903'); $location.hash('case');

Mark Over a year ago

$locationProvider.html5Mode(true); Should I use false as a parameter?

adam-beck Over a year ago

No you want to use true. That will prevent Angular from using hashes and instead uses HTML5 History API. Granted, I don't know the browser support for that.

|

traktor · Accepted Answer · 2016-12-01 20:45:48Z

1

With AngularJs 1 the # sign usually follows the page that loads the ngApp Directive... pls correct me if i am wrong.

So i think the only solution to that is to have ngApp directive on the page link where you want the # tag appear...

It is a very bad practice tho.

edited Dec 1, 2016 at 20:45

traktor

19.7k5 gold badges37 silver badges56 bronze badges

answered Dec 1, 2016 at 20:33

Festus Fashola

1612 silver badges9 bronze badges

Collectives™ on Stack Overflow

Replace URL in Angular environment

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related