autoroute.js
This repo is actually evolving to solve the problem of routing in our single page applications, especially on mobile. It's built on top of hashchange
wich has a great compatibility.
Changes
1.013/14
1.0.12
- Slide animation with
this.anim
1.0.11
1.0.9
- HammerJS is now part of Autoroute.js, the best way to handle touch gestures.
- Add
link
attribute to any html tag, eg : <h1 link="route?query=string">Click Me</h2>
. - Autoroute.js uses HammerJS
tap
for link
attribute and future interactions.
Usage
1. Main
route.create
route.create(path, callback)
path : string
it can be /article
callback : function
your module function, to make things when route is matching path
route.start
route.start(path)
path : string
it can be /article
2. Module
Inside your module you can do this, see hello-world.js
or bye.js
in the following :
this.html
this.html += `some html`
this.q
this.html += `Hello ${ this.q.name }`
this.anim
this.anim = true
Every module is rendered once on route.start()
. If you have query in your hash
, the module will be re-rendered when hash
will match module route. If you don't use query in your module and you need to re-render every times :
<li link="path?">Go somewhere<li>
If you want to modularize your app with ES6 Read the following, explaining modularization with Webpack & Babel.
Get Started with ES6
Basic tree
/src
index.html
main.js
bundle.js
/components
hello.js
bye.js
1. Install dependencies
Assuming npm is installed, in your project folder run :
npm init
npm install -g webpack
npm install babel-loader babel-core babel-preset-es2015 --save-dev
echo '{ "presets": ["es2015"] }' > .babelrc
then install autoroute.js :
npm install autoroute.js
2. Config Webpack & Babel
Edit/Add webpack.config.js
in your project root folder as following :
module.exports = {
entry: "./src/main.js",
output: {
path: __dirname + "/src",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules\/(?!autoroute)/,
loader: "babel"
}
]
}
}
3. Some code
index.html
<script src="bundle.js"></script>
<section id="router"></section>
main.js
import route from 'autoroute.js'
import hello from './components/hello'
import bye from './components/bye'
route.create('/hello', helloWorld)
route.create('/bye', bye)
route.start('/hello')
hello-world.js
export default function () {
this.html += `<h1>Hello ${ this.q.name || 'Anonymous' }<h1>
<h2 link="bye?name="${ this.q.name || 'Anonymous' }">Quit ?</h2>`
}
bye.js
export default function () {
this.html += `Bye bye ${ this.q.name || 'Anonymous' }`
}
4. Test/Result
Run webpack
and serve your src
folder with serve
or superstatic
or anything else. Then go to http://localhost:port/#/hello?name=Didier
the result will be :
Hello Didier
Quit ?
A tap on Quit ?
and you're on /bye?name=Didier