Implement routing

[EitanBlumin]

Should be possible using an ugly but cool workaround with a custom 404 page:

https://www.daniweb.com/programming/web-development/threads/471276/routing-with-asp-classic

[EitanBlumin]

AngularJS routing is also an option but that means we'll have to use AngularJS controllers.

[EitanBlumin]

This OAuth tutorial from Microsoft utilizes an interesting "pagemap" routing mechanism using JavaScript and jQuery:

https://docs.microsoft.com/en-us/outlook/rest/javascript-tutorial

The jQuery.load() function could be very useful here for loading partial HTML documents: http://api.jquery.com/load/

So theoretically, we could actually use this method to mimic the AngularJS routing mechanism:

pagemap routing with jQuery load function:

HTML:

<div id="page"></div>

JavaScript:

function render(hash, parameters) {

    var action = hash.split('=')[0];

    // Remove everything
    $('#page').empty();

    var pagemap = {

      // Welcome page
      '': function() {
        $('#page').load('partial_welcome.html', parameters);
      },
      // Error display
      '#error': function() {
        $('#page').load('partial_error.html', parameters);
      },
      // Display inbox
      '#inbox': function() {
        $('#page').load('partial_inbox.html', parameters);
      }
    }

    // activate routing using pagemap
    if (pagemap[action]){
      pagemap[action]();
    } else {
      // Redirect to home page
      window.location.hash = '#';
    }
  }

The jQuery load() function also allows the usage of a callback function to be executed post-processing when the loading is complete, thus givings us the semblance of using a controller function.

In short:

$(container).load(partial_component, parameters, callback_function);

A generic routing function could receive the following parameter as routing/pagemap configuration:

var pagemap = {
"#welcome":
{
    "partial_component": "welcome.html',
    "callback_function": function () { alert("Hello and welcome!"); }
},
"#inbox": 
{
    "partial_component": "inbox.html',
    "callback_function": function () { openInbox(); }
},
...
]

And the generic routing function would look like this:

function route(container, hash, parameters, pagemap) {
    if (pagemap[hash]) {
        $(container).load(pagemap[hash].partial_component, parameters, pagemap[hash].callback_function);
    } else {
        throw 'unrecognized route: ' + hash
    }
}

[EitanBlumin]

Naturally, I'm not the first to think of this...

https://github.com/c-smile/spapp

https://visionmedia.github.io/page.js/

https://css-tricks.com/using-the-html5-history-api/