html5 mode routing in javascript

Question

my web application is working on example.com and I want to pass an id to it like this example.com/165165

in angular router we just need $locationProvider.html5Mode(true). but i am not using any framework or router library. is there any simple way to do what angular router does?

I have seen HTML5 History API demo which is using history object and listening popstate to watch url changes. so you could go https://html5demos.com/history/first through the first link in the HTML5 History API but you can not access https://html5demos.com/history/first directly. I want to access it directly.

any help would be appreciated.

A pure JS example of using a "HTML5 mode routing" (whatever the hell that means) would be `document.location="example.com/165165"`. Not sure what more you are looking for. No URL will work, of course, unless the server is set up to recognize it. — John Wu, Jul 03 '17 at 07:39
what you are talking about is the addition of several things: you can manipulate history states without need that the url changes (add properties). It is of course more clever that url changes too. But like it says in your link example, if you change url to reflect properties, these urls become invalid for refresh if you don't have a server tool, like url rewrite by htaccess for example, for these url to be understood and the properties extracted — Kaddath, Jul 03 '17 at 07:51
thank you @Kaddath. my question is how angular or other router do this? is there any simple way to do that? — fingerpich, Jul 03 '17 at 08:25
having done that in the past, in a custom app and for a joomla plugin, the basics are not that complicated. With a combination of js `pushState`, `replaceState` and `onpopstate` and a .htaccess file with `mod_rewrite`, you can get a simple routing to work quite easily. But if you want a flexible tool that lets you add multiple parameters and different url structures, that will be a little tough — Kaddath, Jul 03 '17 at 09:01
Routing for SPAs can only work if you configure the web server it's running on to do so. In nginx, for example, you need to configure your vhost so that it points to the projects index file where the app will be started and it also needs to redirect it including the whole query string. The app then can pick up the query string and show the correct route according to the query string. You could also parse `document.location.pathname` and compare it to a state object, similar to Angular's. — Simon, Jul 03 '17 at 09:55
Thank you @SimonNußbaumer. nginx was ok , i just didn't about `document.location.pathname`. thank you a lot. — fingerpich, Jul 03 '17 at 12:39

fahad · Answer 1 · 2017-07-03T07:49:39.777

-1

First we create route like

export function routerConfig ($stateProvider, $urlRouterProvider,$httpProvider, $locationProvider) {
'ngInject';
$stateProvider
.state('example', {
  url: '/example:id',
  templateUrl: 'template path here',
  controller: 'ExampleController',
})

$locationProvider.html5Mode(true);
}

and add index.html <base href="/"> in head tag

edited Jul 03 '17 at 07:49

answered Jul 03 '17 at 07:40

fahad

129
1
1
10

1

Perhaps you shouldn't have tagged angularjs in your question, fingerpich. – John Wu Jul 03 '17 at 07:48

score -1 · Answer 2 · edited Jul 09 '17 at 14:49

-1

This is the example code, it's using jQuery for certain things but you can turn it to pure js anytime

// this should be the Ajax Method.
// and load the url content
var setCurrentPage = function(url) {
  $('h2 span').html(url || "/");
  $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
};

$('#menu-nav a').click(function(e) {
  e.preventDefault();
  var targetUrl = $(this).attr('href'),
    targetTitle = $(this).attr('title');

  $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);

  window.history.pushState({
    url: "" + targetUrl + ""
  }, targetTitle, targetUrl);
  setCurrentPage(targetUrl);
});

window.onpopstate = function(e) {
  $("#menu-nav a").fadeTo('fast', 1.0);
  setCurrentPage(e.state ? e.state.url : null);
};

body {
  margin: 10px
}

h1 {
  font-size: 20px
}

<h1>Navigation Without Refresh <span></span></h1>
<h2>Current Page: <span>/</span></h2>
<ul id="menu-nav">
  <li><a href="/page-1/" title="Pagina 1">Page 1</a></li>
  <li><a href="/page-2/" title="Pagina 2">Page 2</a></li>
  <li><a href="/page-3/" title="Pagina 3">Page 3</a></li>
</ul>

edited Jul 09 '17 at 14:49

marc_s

732,580
175
1,330
1,459

answered Jul 03 '17 at 07:41

MehulJoshi

879
8
19

https://html5demos.com/history/ is listening popstate but as i said it wont work when i access it directly. – fingerpich Jul 03 '17 at 07:44
can you provide demo? fiddle? – MehulJoshi Jul 03 '17 at 07:49
for example https://html5demos.com/history/first is an invalid address. – fingerpich Jul 03 '17 at 08:29
I know the page is removed, so can you provide what you want? in my example i showed you how history api works. – MehulJoshi Jul 03 '17 at 08:30
just create fiddle from my code and comment out the part you want to modify and how you want it and I will update it as per your requirement. – MehulJoshi Jul 03 '17 at 08:31
its not removed. you can access it through the html5demos.com/history – fingerpich Jul 03 '17 at 08:32
the same is happening here, what change you need? – MehulJoshi Jul 03 '17 at 08:34
can you tell me how you are accessing? – MehulJoshi Jul 03 '17 at 08:34
On page load you have to push all the states, it's like defining routes, then once that is done you can navigate to any state. do you understand? `window.history.pushState({ url: "" + targetUrl + "" }, targetTitle, targetUrl); setCurrentPage(targetUrl);` – MehulJoshi Jul 03 '17 at 10:05
set targetUrl initially so it will go to that page. – MehulJoshi Jul 03 '17 at 10:06

html5 mode routing in javascript

2 Answers2