https://github.com/aknuds1/staterouter.js

Simple JavaScript HTML5 routing library built on top of History.js
https://github.com/aknuds1/staterouter.js

Last synced: 6 months ago
JSON representation

Simple JavaScript HTML5 routing library built on top of History.js

• Host: GitHub
• URL: https://github.com/aknuds1/staterouter.js
• Owner: aknuds1
• Created: 2013-01-01T22:01:17.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2018-09-16T17:06:30.000Z (about 7 years ago)
• Last Synced: 2025-04-11T21:05:01.012Z (6 months ago)
• Language: JavaScript
• Size: 48.8 KB
• Stars: 22
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.txt

Awesome Lists containing this project

README

          
# StateRouter.js

## Description

StateRouter.js is a small JavaScript library intended to extend the

[History.js](https://github.com/balupton/History.js/) HTML5 history library

with routing capabilities.

## Why

I wasn't able to find any routing libraries for History.js that I was quite

happy with, so I decided I might as well write my own. An important benefit of

doing it myself is that I can ensure good test coverage. The tests are written

BDD style, with the help of the excellent

[Jasmine](https://jasmine.github.io/) framework.

## Requirements

StateRouter.js requires just the

[History.js](https://github.com/balupton/History.js/) library.

## Installation

Download lib/staterouter.js and include it in your page after History.js.

## Usage

    function getHome() {

    }

    function getPersons() {

    }

    function getPerson(id) {

        // Browser state is accessible as the this variable

        if (/^.+?\?alert=true$/.test(this.url)) {

            alert("What: " + this.data.what + "\nTitle: " + this.title + "\nURL: " + this.url);

        }

    }

    var router = new staterouter.Router();

    // Configure routes

    router

      .route('/', getHome)

      .route('/persons', getPersons)

      .route('/persons/:id', getPerson);

    $(document).ready(function () {

        // Perform initial routing

        router.perform();

        // Navigate to a URL, also specifying the page's data and title

        router.navigate('/persons/1');

        // Go back

        router.back();

        // Go forward

        router.go(1);

        // Navigate to a URL, also specifying the page's data and title

        router.navigate('/persons/1?alert=true', {what: 'State'}, 'Person');

    });

## Testing

StateRouter.js is tested through Jasmine specifications, contained in

'spec/StateRouter.js'. In order to run them, open 'specrunner.html' in a

browser.