AngularJS - How can I do a redirect with a full page load?

Question

I want to do a redirect that does a full page reload so that the cookies from my web server are refreshed when the page loads. window.location = "/#/Next" and window.location.href = "/#/Next" don't work, they do an Angular route which does not hit the server.

What is the correct way to make a full server request within an Angular controller?

With plain JS this works in FF and Chrome: document.location.assign(); location.reload(true); — bjdodo, Mar 05 '19 at 10:59

score 185 · Answer 1 · edited Aug 05 '14 at 18:52

185

For <a> tags:

You need to stick target="_self" on your <a> tag

There are three cases where AngularJS will perform a full page reload:

Links that contain target element
Example: <a href="/ext/link?a=b" target="_self">link</a>
Absolute links that go to a different domain
Example: <a href="http://angularjs.org/">link</a>
Links starting with '/' that lead to a different base path when base is defined
Example: <a href="/not-my-base/link">link</a>

Using javascript:

The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API: $window.location.href.

See:

edited Aug 05 '14 at 18:52

MetaGuru

42,847
67
188
294

answered Apr 14 '13 at 18:54

jszobody

28,495
6
61
72

I'm doing this in a controller, not html. – Mike Pateras Apr 14 '13 at 18:57
16

$window.location.href does the same thing that window.location.href does. I'm pretty sure $window is just a wrapping service for window. Either way both do an Angular route instead of the full page refresh. – Mike Pateras Apr 14 '13 at 19:05
3

$window.location.href definitely causes a full page refresh, I'm doing it in my app. – jszobody Apr 14 '13 at 19:06
From the docs on $location: "What does it not do? It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href." – jszobody Apr 14 '13 at 19:06
3

I've read the same thing. Doesn't work in the current version of Chrome. It does an Angular route. – Mike Pateras Apr 14 '13 at 19:08
I'm using AngularJS 1.0.6 with the latest Chrome, it's working great. What version of AJS are you on? – jszobody Apr 14 '13 at 19:09
1

1.0.6 from the CDN. I'm doing this within an $http.post success callback, if that matters, though I've tried it outside of the callback and gotten the same results. If I do the redirect to "/" (which I have an Angular route defined for as well), it works with the full page refresh, but "/#/Next" just does the view change. – Mike Pateras Apr 14 '13 at 19:16
Might help then if you put together a JSfiddle for inspection, and update your question. I can't reproduce the issue. – jszobody Apr 14 '13 at 19:17
1

have you tried `location =location.href+ "/#next"` ? or suitable variation that strips any hashes – charlietfl Apr 14 '13 at 19:24
Same result. Angular route. – Mike Pateras Apr 14 '13 at 19:29
how about `meta no-cache` tag? Seems very strange that angular is intercepting `window.location` – charlietfl Apr 14 '13 at 19:35
5

`` is what worked for me. thanks ! – Michael Dec 15 '13 at 12:38
location.href alone does not work if it is same url with just different hash. – sean May 20 '15 at 13:37
To anyone stuck, the `destinationUrl` must contain the `http://` prefix, or it will open ww.yourcurrenturl.com/destinationurl – Bruno Peres Jun 02 '15 at 18:18
i couldn't get any of them work, until i tried target _self option mentioned above. – windmaomao Jul 27 '15 at 21:05
Is there a way to do the analogous of `` but in javascript? I tried to use window and $window but it always goes to an Angular route (I am using html5mode). I want to go to www.my-app-base-url/link sending the request to the server. – klode May 24 '16 at 16:01

score 33 · Answer 2 · edited Jun 19 '22 at 09:48

We had the same issue, working from JS code (i.e. not from HTML anchor). This is how we solved that:

If needed, virtually alter current URL through $location service. This might be useful if your destination is just a variation on the current URL, so that you can take advantage of $location helper methods. E.g. we ran $location.search(..., ...) to just change value of a querystring paramater.
Build up the new destination URL, using current $location.url() if needed. In order to work, this new one had to include everything after schema, domain and port. So e.g. if you want to move to:

http://yourdomain.example/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en

then you should set URL as in:

var destinationUrl = '/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en';

(with the leading '/' as well).

Assign new destination URL at low-level: $window.location.href = destinationUrl;
Force reload, still at low-level: $window.location.reload();

This doesn't work for me in Angular 1.3.1 with Chrome 38. The value of $window.location.href does not change when I assign a path or a full URL. Only $window.location.assign() worked for me. — FelixM, Nov 19 '14 at 14:09
Having the same problems as Felix, solved it in a different way http://stackoverflow.com/questions/31137809/setting-window-location-href-not-working-as-expected — Soroush Hakami, Jun 30 '15 at 12:51

score 13 · Answer 3 · answered Jul 01 '16 at 10:19

13

After searching and giving hit and trial session I am able to solove it by first specifying url like

$window.location.href = '/#/home/stats';

then reload

$window.location.reload();

answered Jul 01 '16 at 10:19

Daniyal

690
6
10

This seems to fix the issue, but clicking back and forward on the browser will cause a lot of inconsistencies. – luisluix Apr 12 '17 at 20:17

score 9 · Answer 4 · answered Jun 07 '15 at 09:39

I had the same issue. When I use window.location, $window.location or even <a href="..." target="_self"> the route does not refresh the page. So the cached services are used which is not what I want in my app. I resolved it by adding window.location.reload() after window.location to force the page to reload after routing. This method seems to load the page twice though. Might be a dirty trick, but it does the work. This is how I have it now:

  $scope.openPage = function (pageName) {
      window.location = '#/html/pages/' + pageName;
      window.location.reload();
  };

score 1 · Answer 5 · answered Jun 22 '18 at 12:16

1

Try this

$window.location.href="#page-name";
$window.location.reload();

answered Jun 22 '18 at 12:16

imskm

780
1
14
27

AngularJS - How can I do a redirect with a full page load?

5 Answers5

Linked