Routy.js
A dead simple module to manage hash routing in the browser.
Install
You can either use the module with npm
`npm install routy`
Or include the file build/Routy.js
in your HTML (which provides a wrapper at window.Routy
)
Examples of usage
Simple usage with controller functions
Bind functions to hashbang routes, execute them by changing the hash location to #/path
.
var Router = Router; var myRouter = ; { console; // The Route instance (containing path, custom options, ..) console; // Will contained requested path, URL params, etc.. (If availabe, in different forms) console; // The Router instance - also containing current `.path` and `.route`} { console; // { apples: '..'}} { // Access route custom options. Boom! console; // { someOption: 'wooah' }} myRouter;
Extending routes
You can extend routes options by using the id
and extends
keys inside your route options object.
For example:
myRouter // This route will be extended // This route will also contain a `foo` option set to 'bar'
Simple templates example
Routy.Router
instanciates as an event emitter.
Intercept the change
event and access custom route options to render a template.
var Router = Router; var router = view = document; // A full implementation would load templates from elsewhere router; { viewinnerHTML = reqrouteoptionstemplate;} router;
Intercept route changes + redirect
You can intercept the beforeChange
event to apply a redirect by setting a .redirect
value on a Routy.Router
instance.
var Router = Router; var router = isLoggedIn = false; router // Custom option; { if reqrouteoptionsrequiresLogin // Use the router.redirect property to redirect to a different path routerredirect = '/login'; } router;
Intercept route changes + cancel
When intercepting beforeChange
you can also just cancel route change before it happens by setting the .cancel
property to true.
var Router = Router; var router = ; router; { if reqroutepath === '/locked' // Use the router.cancel property to prevent redirection routercancel = true; } router;
HTML5 mode
Hashbangs are not exactly the fanciest way of building routes in a one page app.
Activate HTML5 mode (Uses history.pushState
) to have clean URL routes.
When the page is initialised they will parse the current location.pathname
and execute on the appropriate route.
HTML5 mode will also listen for clicks on <a>
tags and replace the default behaviour of relative links.
var Router = Router; var router = ; router; { console; // "/foo"} router;
Router API
.add(route_pattern, [ route_function ], [ route_options ])
- Add a route with custom options and callback function.otherwise(redirect_path)
- Set a default path string to redirect to when trying to access an undefined route.run()
- Start listening to hash change events.stop()
- Stop listening to hash change events.refresh()
- Re-trigger route behaviour based on current path.goTo(path)
- Direct to a given path.html5([ state ])
- Pass a boolean (Defaults totrue
) to set / unset HTML5 mode
Develop
- Clone the repo and install the dependencies
git clone git@github.com:KanoComputing/routy.js.git
cd routy.js
npm install
- Update the build
npm run build
Licence
Copyright (c) 2014 Kano Computing Ltd. - Released under the MIT license