widget-router/sample/index.js

Widget Router is another Typescript (also JavaScript) Router, but this one works better if used in widgets inside HTML

(function() {
  var containerId = '#widgetRouterContainer'; // (Mandatory) Id to the Div Container of all widget pages
  var routerConfiguration = {
    afterRouteInitController: true,
    pageIdPrefix: 'widget_router_',
    usingTemplates: false,
    routes: [
      {
        name: "main", // (Mandatory) Name of the Route
        template: '<h1>Main Page</h1><input type="button" value="go to secondary" onclick="WidgetRouter.go(&quot;secondary&quot;);"/><p>Main page description</p>',
        controller: function(routeResult) {
          //do Stuff with routeResult, perhaps compile and render the template inside 'widget_router_main' 
        }
      },
      {
        name: "secondary",
        template: '<h1>Secondary Page</h1><input type="button" value="go to main" onclick="WidgetRouter.go(&quot;main&quot;);"/><p>Secondary page description</p>',
        controller: function (routeResult) {
          //do Stuff with routeResult, perhaps compile and render the template inside 'widget_router_secondary' 
        }
      }
    ]
  }
  var appScope= {};
  var controllerHelper = {
    sharedData: {},
    renderer: {},
    templatesCollection: {}
  }
  window.WidgetRouter = new WidgetRouter.WidgetRouter(containerId, routerConfiguration, appScope, controllerHelper);

  WidgetRouter.on('beforego', (event, sender) => {
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        console.log('event ' + event + ' will be executed after this async method');
        resolve();
      }, 100);
    });
  });

  WidgetRouter.on('beforego', (event, sender) => {
    console.log('do something before go event gets executed');
  });

  WidgetRouter.on('aftergo', (event, sender) => {
    console.log('do something after go event have finished');
  });

  WidgetRouter.go('main').then(()=> {
    /// do some work after 'go' completed...
  });
})();