StateMan

stateman: A tiny foundation that providing nested state-based routing for complex web application.

stateman is highly inspired by ui-router , you can find many features similiar with it.

But stateman is a standalone library with extremely tiny codebase(10kb minified). feel free to integrated it with whatever framework you like!

Feature

nested routing support.
standalone with tiny codebase.
async routing support if you need asynchronous logic in navigating.
html5 history supported, fallback to hash-based in old browser.
concise API, deadly simple to getting start with it.
support IE6+ and other modern browsers.
well tested, born in large product.

Quirk Start

you may need a static server to run the demo. puer is simple to get start.

just pasting the code to your own index.html, then you can find the demo works.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>StateMan Test</title>
  <script src="https://rawgit.com/leeluolee/stateman/master/stateman.js"></script>
</head>
<body>

<ul>
  <li><a href="#/home">/home"</a></li>
  <li><a href="#/contact">/contact"</a></li>
  <li><a href="#/contact/list">/contact/list</a></li>
  <li><a href="#/contact/2">/contact/2</a></li>
  <li><a href="#/contact/2/option">/contact/2/option</a></li>
  <li><a href="#/contact/2/message">/contact/2/message</a></li>
</ul>
  
<script>
  var config = {
    enter: function(){
      console.log("enter: " + this.name)
    },
    leave: function(){
      console.log("leave: " + this.name)
    }
  }

  function create(o){
    o = o || {};
    o.enter= config.enter;
    o.leave = config.leave;
    return o;
  }

  var stateman = new StateMan();

  stateman
    .state("home", config)
    .state("contact", config)
    .state("contact.list", config )
    .state("contact.detail", create({url: ":id(\\d+)"}))
    .state("contact.detail.option", config)
    .state("contact.detail.message", config)
    .start({});
</script>
</body>
</html>

open the console, see the log when navigating.

you can also check a simple layout demo that open the html5 support here

Reference

Browser Support

Modern Broswer contains mobile devices
IE6+

installation

###bower

bower install stateman

stateman.js have been packaged as a standard UMD, you can use it in AMD、commonjs and global.

npm (browserify or other based on commonjs)

npm install stateman

use

var StateMan = require('stateman');

spm

spm install stateman

use

var StateMan = require('stateman');

component

component install leeluolee/stateman

use

var StateMan = require('leeluolee/stateman');

Directly download

Example

some basic example has been placed at example

run demo local

clone this repo
npm install gulp -g && npm install
gulp server
check the example folder

LICENSE

MIT.

TODO

notify the state on the way to current
need a config can't directly visit the state at the branch

spmjs/stateman