Z-Router

What is Z-router ?

Z-router is a light javascript router based on the hash # part of the url allowing you to display inline or ajax-fetched templates.

No dependencies are required, It is very simple to use and is very flexible with the possibility to add parameters into the url and use it in the template.

The only thing you'll have to do is adding a div #z-router-view and make your own routes.

github

download

How to build a route

A route is an object with some properties :

A url {String}
Parameters can be passed in the route, you'll have to use that syntax : /home/:indexand the index parameter will have the value passed in the url.
A options object ( that will be available in the template & the callback ) {optional}
A template (can be inline html OR external html file):
More information about the template engine's functionalities
- Inline {String}
- External {string | optional}
  It will be ignored if there is a template provided in the route declaration.
  The fetched template is added to the route as an (inline) template once the ajax call ended.
A callback function {function | optional}
The optionsobject of the route is available in it.
options.paramsis the object containing the url parameters. (doesn't exist if no parameters in the url)

Example :

{
  url: "/home",
  options: {
    siteName: "Z-Router"
  },
  template: "<h1> My website is called : <% this.siteName %> </h1>",
  callback : function(options) {
    console.log("Hello, the website is called " + options.siteName);
  }
}

Z-Router methods :

ZRouter is the main "object Class", most of its methods are chaining capable.

setRoot()
Sets the default route in the router. It is used when no route provided on load or when the route asked doesn't exist. (default: "/")

hashbang()
Sets the default prefix for the hash part. if true, routes will work with the '#!' prefix. (default: false)
setLoaderTpl()
Sets what will be displayed when the router is fetching a template. It is inline html in a string. (default: "<p>Loading...</p>")
add()
Adds a route in the routes array of the router. You have to pass a valid route or it won't be registered
navigate()
Changes the hash to the url passed in.
check()
Forces the router to recheck the hash part of the url (usefull if you do not use the listen method)
listen()
Starts the hash listener, so that when it changes, the new template will replace the current one. (better use at the end of the routes declaration)

Z-Router Example:

Here is the code for a simple router:

ZRouter
// set the root path (default "/")
  .setRoot("/")
  // set the loader template
  .setLoaderTpl('<h2>The template is loading, be patient please!</h2>')

  //add a route
  .add({
    url : "/",
    template: '<h2>The root Url</h2>' +
              '<hr>' +
              '<p><span class="inline-code"> url : "<% this.url %>" </span></p>' +
              '<p>What is the root url?</p>' +
              '<ul><li>It will be automatically loaded if no route has been provided on page load</li>' +
              '<li>It will be loaded if no route matches the entered url</li></ul>' +
              '<p>It can be changed : <span class="inline-code">ZRouter.setRoot("/newRootRoute")</span></p>',
    options: {
      url : "/"
    },
    callback : function(options){
      displayhashRoute();
    }
  })

  //add a route
  .add({
    url  : "/user",
    template : '<h2>A Normal route</h2>' +
                '<hr>' +
                '<p><span class="inline-code"> url : "<% this.url %>" </span></p>' +
                '<p>You could probably use this route to display a list of users...</p>',
    options:{
      url: "/user"
    },
    callback : function(options){
      displayhashRoute();
    }
  })

  //add a route
  .add({
    url  : "/user/:id",
    template : '<h2>A route with parameter </h2>' +
                '<hr>' +
                '<p><span class="inline-code"> url : "<% this.url %>" </span></p>' +
                '<p><span class="inline-code"> parameter : id = <% this.params.id %> </span></p>' +
                '<p>You could probably use this route to display a specific user</p>',
    options: {
      url: "/user/:id"
    },
      callback : function(options){
      displayhashRoute();
    }
  })

  //add a route
  .add({
    url : "/fetched",
    templateUrl : 'partials/fetched.html',
    options: {
      url : "/fetched"
    },
    callback : function(options) {
      displayhashRoute();
    }
  })

  // listen for hash changes
  .listen();
  
  //display the hash url inside the adressbar of the fake browser
  function displayhashRoute (){
    var url = window.location.hash;
    document.querySelector('.address-bar').innerHTML = url;
  }