stateman
v0.3.0-beta.2
Published
A tiny foundation that providing nested state-based routing for complex web application.
Downloads
1,329
Readme
StateMan
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
- nested routing support.
- standalone with tiny codebase.
- async routing support if you need asynchronous logic in navigating. Support Promise
- 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.
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
- Modern browsers, including mobile devices
- IE6+
Installation
Bower
bower install statemanstateman.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 statemanTo use:
var StateMan = require('stateman');spm
spm install statemanTo use:
var StateMan = require('stateman');Component
component install leeluolee/statemanTo use:
var StateMan = require('leeluolee/stateman');Direct downloads
Examples
Some basic examples can be found in the examples directory.
run demo local
- clone this repo
npm install gulp -g && npm installgulp server- check the example folder
LICENSE
MIT.