How is the spa routing of angular2 working without the hash character in the url?

Question

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 ?

Answer 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: