HTML 5 Location Routing

6 posts, 0 answers
  1. Devin
    Devin avatar
    10 posts
    Member since:
    Oct 2015

    Posted 15 Mar Link to this post

    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

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 17 Mar Link to this post

    Hello,

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

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Devin
    Devin avatar
    10 posts
    Member since:
    Oct 2015

    Posted 17 Mar in reply to Petyo Link to this post

    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.

  5. Devin
    Devin avatar
    10 posts
    Member since:
    Oct 2015

    Posted 17 Mar in reply to Devin Link to this post

    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.
  6. Devin
    Devin avatar
    10 posts
    Member since:
    Oct 2015

    Posted 18 Mar Link to this post

    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.

     

  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 22 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready