Home

Awesome

StateMan

Gitter

Build Status

stateman: A tiny foundation that provides nested state-based routing for complex web applications.

stateman is highly inspired by ui-router; you will find many features similar to it.

But stateman is a standalone library with an extremely tiny codebase (5kb minified). Feel free to integrate it with whatever framework you like!

Reference

Feature

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

Quick Start

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

just paste the code to your own index.html, and load it up in a browser.


<!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 to see the output when navigating.

Demos

###1. Simple Layout Demo:

The code in this demo is for demonstration only. In a production development, you will want a view layer to create nested views.

###2. A simple SPA built upon Regularjs (Living Template) + requirejs + stateman: Link

I create a simple wrapping (regular-state) to integrate stateman with Regularjs, which makes it easy to build a single Page Application. thanks to the concise API, the code is very clean. You will find that integrating stateman with other libraries is also simple.

Browser Support

  1. Modern browsers, including mobile devices
  2. IE6+

Installation

Bower

bower install stateman

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

npm (browserify or other based on commonjs)

npm install stateman

To use:

var StateMan = require('stateman');

spm

spm install stateman

To use:

var StateMan = require('stateman');

Component

component install leeluolee/stateman

To use:

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

Direct downloads

  1. stateman.js
  2. stateman.min.js

Examples

Some basic examples can be found in the examples directory.

run demo local

  1. clone this repo
  2. npm install gulp -g && npm install
  3. gulp server
  4. check the example folder

LICENSE

MIT.

ChangLog