A tiny foundation that providing nested state-based routing for complex web application.
JavaScript HTML
Latest commit b5662d1 Nov 17, 2015 @leeluolee Merge pull request #25 from em-yuanbo/master
fix two bugs
Permalink
Failed to load latest commit information.
docs Update API-en.md Oct 19, 2015
example doc is ready Sep 28, 2015
scripts change DOc Sep 28, 2015
src fix bug #24 Oct 30, 2015
test change DOc Sep 28, 2015
.DS_Store add canEnter canLeave LifeCycle to stateman Sep 25, 2015
.gitignore change DOc Sep 28, 2015
.jshintrc is Dec 28, 2014
.npmignore add doc Sep 27, 2015
.travis.yml add testcase for event:namespace Sep 26, 2015
License add doc Dec 30, 2014
README.md fix link at README Sep 28, 2015
bower.json add doc Sep 27, 2015
component.json Bumps version to 0.1.9 Sep 25, 2015
gulpfile.js release 0.2.0 Sep 28, 2015
package.json change DOc Sep 28, 2015
stateman.js change DOc Sep 28, 2015
stateman.min.js change DOc Sep 28, 2015

README.md

StateMan

Gitter

Build Status spm package

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 (10kb 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