2

When performing the angular2 "Tour of Heros" tutorial, I just noticed their spa router works without a trailing hash (#) character in the url (like kendo spa router does for instance).

How does angular2 make it work without the browser perform a full page reload ?

John-Philip
  • 3,392
  • 2
  • 23
  • 52
  • Possible duplicate of [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) – Estus Flask Feb 02 '17 at 14:10
  • @estus, not duplicate I think because I'm asking how it works specifically to the angular2 framework. You are mixing topics here. – John-Philip Feb 02 '17 at 14:16
  • The question sounds like you're not familiar with the concept of History API and pushState. The duplicate question explains in detail how it is done in plain JS. And you can be sure that Angular 2 does the same thing under the hood. – Estus Flask Feb 02 '17 at 14:28

1 Answers1

1

It is using the modern browser features to do the trick.

read the official angular docs.

https://angular.io/docs/ts/latest/guide/router.html#!#browser-url-styles

Appendix: LocationStrategy and browser URL styles

When the router navigates to a new component view, it updates the browser's location and history with a URL for that view. This is a strictly local URL. The browser shouldn't send this URL to the server and should not reload the page.

Modern HTML 5 browsers support history.pushState, a technique that changes a browser's location and history without triggering a server page request. The router can compose a "natural" URL that is indistinguishable from one that would otherwise require a page load.

Here's the Crisis Center URL in this "HTML 5 pushState" style:

Subindev
  • 148
  • 2
  • 10