Skip to content

Instantly share code, notes, and snippets.

@muralikrishnat

muralikrishnat/app.js

Last active January 5, 2025 10:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save muralikrishnat/9c7049fda1a3708c780c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save muralikrishnat/9c7049fda1a3708c780c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. muralikrishnat revised this gist Feb 22, 2016. 1 changed file with 30 additions and 0 deletions.
    30 changes: 30 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Routing with pure Javascript</title>
    </head>
    <body>
    <div class="container-app">
    <div>
    <ul>
    <li><a href="javascript:App.navigateTo('/home')">Home</a> </li>
    <li><a href="javascript:App.navigateTo('/aboutus')">About US</a> </li>
    <li><a href="javascript:App.navigateTo('/contactus')">Contact US</a> </li>
    <li><a href="javascript:App.navigateTo('/services')">Services</a> </li>
    </ul>
    </div>
    </div>

    <script src="{{cdn}}/jquery.js"></script>
    <script src="{{localhost}}/js/vendor/routing.js"></script>
    <script src="{{loclahost}}/js/app.js"></script>
    <script>
    $(document).ready(function () {
    if(App){
    App.init();
    }
    });
    </script>
    </body>
    </html>
  2. muralikrishnat created this gist Feb 22, 2016.
    31 changes: 31 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    var App = {};

    var addRoutes = function () {
    $NB.addRoute('/books/:id', function (params) {
    console.log('Route is ', params.Title, params.id);
    }, 'books');

    $NB.addRoute('/:category/:id', function (params) {
    console.log('Route is ', params.Title, params.category, params.id);
    }, 'category');

    $NB.addRoute('/:category/:id/:action', function (params) {
    console.log('Route is ', params.Title, params.category, params.id, params.action);
    }, 'category action');


    $NB.addRoute(['/', '/:pagename'], function (params) {
    console.log('Route is ', params.Title, params.pagename);
    }, 'page');
    };



    App.init = function () {
    addRoutes();
    $NB.loadController(location.pathname);
    };

    App.navigateTo = function (pageUrl) {
    $NB.navigateTo(pageUrl);
    };
    92 changes: 92 additions & 0 deletions js-routing.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,92 @@
    //self invoking function which binds routing object to 'window' object
    (function (window) {
    //just a variable/object
    var $M = {};
    //list that holds routing details i.e., route url and function to execute
    $M.RoutingList = [];
    //to check status of pages
    $M.currentPage = '';

    //Routing class which has multiple properties i.e., url,function to execute when
    var RoutingClass = function (u, f, t) {
    this.Params = u.split('/').filter(function(h){ return h.length > 0; });
    this.Url = u;
    this.Fn = f;

    this.Title = t;
    };


    //simple utility function that return 'false' or url params
    //will parse url and fetches param values from 'location.href'
    var checkParams = function (urlParams, routeParams) {
    var paramMatchCount = 0, paramObject = {};

    for(var i =0 ; i < urlParams.length ; i++){
    var rtParam = routeParams[i];
    if(rtParam.indexOf(':') >= 0){
    paramObject[rtParam.split(':')[1]] = urlParams[i];
    paramMatchCount += 1;
    }
    }

    if(paramMatchCount === urlParams.length){
    return paramObject;
    }

    return false;
    };


    //will executes 'function(s)' which are binded to respective 'url'
    //along with values of url params for e.g.,
    //: /:page/:pageid
    //: /home/3434434
    //values will be page=>home and pageid=>3434434
    $M.loadController = function (urlToParse) {
    if($M.currentPage !== urlToParse) {
    $M.previousPage = $M.currentPage;
    $M.currentPage = urlToParse;
    var uParams = urlToParse.split('/').filter(function (h) {
    return h.length > 0;
    });
    var isRouteFound = 0;
    for (var i = 0; i < $M.RoutingList.length; i++) {
    var routeItem = $M.RoutingList[i];
    if (routeItem.Params.length === uParams.length) {
    var _params = checkParams(uParams, routeItem.Params);
    if (_params) {
    _params.Title = routeItem.Title;
    isRouteFound += 1;
    routeItem.Fn.call(null, _params);
    }
    }
    }
    }else{
    console.log('you are on same page dude!!!!');
    }
    };


    //uses browsers pushSate functionality to navigate from one page to another
    //and loads respective controller to execute
    $M.navigateTo = function (navigateTo) {
    window.history.pushState(null, null, navigateTo);
    $M.loadController(navigateTo);
    };

    //will add 'url' and 'function' to routing list
    $M.addRoute = function (urlToMatch, fnToExecute, t) {
    if(typeof urlToMatch === 'string'){
    $M.RoutingList.push(new RoutingClass(urlToMatch, fnToExecute, t));
    }else if(typeof urlToMatch && urlToMatch instanceof Array){
    urlToMatch.forEach(function (lItem) {
    $M.RoutingList.push(new RoutingClass(lItem, fnToExecute, t));
    });
    }

    };

    //binding routing object to window as '$NB'
    window.$NB = $M;
    })(window);