AngularJS change URL but not view

Question

We are using angularJS and angular ui-router and want to change the URL in the address bar but keep the view/state the same.

I have tried using history pushstate but I am having conflicts with it causing an infinite $digest loop.

I have also tried the method described in sync() https://github.com/angular-ui/ui-router/wiki/Quick-Reference#urlroutersync - which is essentially calling preventDefault on $locationChangeSuccess. However, this doesn't seem to work - as demonstrated by this plunkr: http://plnkr.co/pLC2Ai

Does anyone know of any solutions to this issue?

When i click on Route 1, it changes to state 1, Route 2 : state 2. What doesn't work and what is it supposed to do? — Philipp Gayret
– Philipp Gayret, Commented Jan 18, 2014 at 18:38
It should NOT show the state (versus it is right now). I just updated the plunker so you can see the $location.path() and the action I'd like to see is NOT changing the state but CHANGING the path. — wlingke
– wlingke, Commented Jan 18, 2014 at 19:53
With changing the part, do you literally mean the URL you see in plunker? Because you should check the iframe of your code running run.plnkr.co/plunks/pLC2Ai — Philipp Gayret
– Philipp Gayret, Commented Jan 18, 2014 at 20:03
Yes that is what I mean and also yes, I checked against the iframe — wlingke
– wlingke, Commented Jan 18, 2014 at 20:06
For me, this is the perfect answer: stackoverflow.com/a/24102139/1309218 — Tsuneo Yoshioka
– Tsuneo Yoshioka, Commented Jul 16, 2014 at 2:18

Miraage · Accepted Answer · 2014-01-18 18:41:26Z

2

Of course, my mate! :)

use $stateChangeStart, not $locationChangeSuccess

answered Jan 18, 2014 at 18:41

Miraage

3,4943 gold badges28 silver badges43 bronze badges

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

2 Comments

wlingke Over a year ago

I've tried this. It used to work in older versions of angular ui router but it no longer does. It prevents both the state and path from changing. plnkr.co/zq3WYq

wlingke Over a year ago

Really close... You can't see the effect on plunker since they don't alter the address bar, but I just tried this in my app. The address bar doesn't change but console.log($location.path()) indeed shows correctly.

rg88 · Accepted Answer · 2014-01-18 21:21:00Z

0

Have you tried the history.pushState method?

On Mozilla's site the say: "This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists."

history.pushState(stateObj, "page 2", "bar.html");

You may need to inject $locationProvider and then set $locationProvider.html5Mode(true).

answered Jan 18, 2014 at 21:21

rg88

21k18 gold badges80 silver badges110 bronze badges

1 Comment

wlingke Over a year ago

Yes I have tried that before. It conflicts with angular and tends to cause an infinite digest loop. Check it out here: run.plnkr.co/plunks/9afPBd and plnkr.co/edit/9afPBd?p=preview This issue is noted in angularJS's issues log but there's been no fixes as of yet

Collectives™ on Stack Overflow

AngularJS change URL but not view

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related