HTML 5 Location Routing

[Devin]

Hi there,

I was wondering if it's possible to remove the # from the routing in a Kendo SPA application.   

In angularjs you set the locationProvider to use "html5" mode and it relies upon the web server being smart enough to serve any request underneath the spa to the main spa page.

For example

http://www.example.com/spa/#/main

would become

http://www.example.com/spa/main

Thanks,

Devin

[Petyo]

Hello,

the feature you referred to is known as pushState. The router supports it, too.

Regards,
Petyo
Telerik

 

 

[Devin]

Hmm, this doesn't seem to address my question.

I understand you can use pushState to alter the browser's page history.  

However it's my understanding that the SPA router is expecting hash tags if you want to deep link into it.

Take your Sushi example:

http://demos.telerik.com/kendo-ui/websushi/

Whenever you click on a menu item you'll get a link like

http://demos.telerik.com/kendo-ui/websushi/#/menu/1

If I start a new browser window and paste in http://demos.telerik.com/kendo-ui/websushi/#/menu/1 it'll take me to that specific menu item.

Does the router support getting rid of the hash tag to

http://demos.telerik.com/kendo-ui/websushi/menu/1

and still getting redirected to that specific menu item.

 

This explains the options in the Angularjs world:

http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting

if that's of any help in understanding what I'm asking.

[Devin]

Actually, after re-reading what you said I think I understand that the router supports it.  I'll play with the sushi example and post it if I get that working.

[Devin]

So I played with the pushState mode on the router, and setup the url-rewrite in IIS rules to forward everything to spa as it should.

However whenever I refresh a page on spa/menu/1 it loads the app as it should, but it doesn't properly load the application state.

Additionally I noticed that the nice left/right sliding animation doesn't work properly either.   Am I doing something obviously wrong or is this just a case of you basically have to design the application from the beginning to use pushState vs hashTag route state?

 

I've attached my example if anyone is interested.

 

[Petyo]

Hi Devin,

of you basically have to design the application from the beginning to use pushState vs hashTag route state?

This is correct - there are plenty of URLs in the scripts and links which should be changed in order for the pushState to be enabled. It is not a just a matter of changing the router configuration option.

Re-wiring an existing app may be quite complex, in fact. I would like to suggest that you start simpler, by running the snippets from the documentation, and gradually expanding from there. Please let me know if you need any further help here.

Regards,
Petyo
Telerik