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?

Answer 1

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:

• https://docs.angularjs.org/guide/$location
• https://docs.angularjs.org/api/ng/service/$location

Answer 2

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

1. 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.

2. 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.com/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).

3. Assign new destination URL at low-level: $window.location.href = destinationUrl;

4. Force reload, still at low-level: $window.location.reload();