-
General Information
What is AiRouter? - AiRouter is modern JavaScript Front-End router that allows you to navigate your routes easily.
Why to use AiRouter?
- It's Open Source
- Supports hash typed URLs like http://site.com/#/products/list
- Work with the History API
- Provide easy-to-use API
- Provide multiple callbacks
- Provide group routes
- Returns parsed data from query
- Handles unrouted URLs
Download AiRouter and start building your dream applications
-
Installation
You can download AiRouter direcly :
<script src="airouter.min.js" charset="utf-8"></script> //OR <script src="airouter.js" charset="utf-8"></script>
Or Use Bower to install:
$ bower install AiRouter
If You have Any Questions please do not hesitate to contact me... :)
-
Basic Usage
To use AiRouter first you need to create new instance of router:Then you can route your desire path:new AiRouter(mode);
var router = new AiRouter(mode);Create new instance of router. Arguments
mode StringOptional param to determinate witch mode you want to use (# or History) #if you need help go to 'mode' section.
route(path, options);
router.route(path, options);Add path to current routes. Arguments
path StringRequired param to route desired path.
options ObjectRequired param with fallowing properties:
- Name String
- beforeAction Function (callback)
- action Function (callback)
- afterAction Function (callback)
Example:
var router = new AiRouter(); router.route('/posts/comments',{ name:'Comments', beforeAction:function(params, query){ //YOUR SUBSCRIBTIONS, AJAX , LIBS }, action:function(params, query){ //RENDER HTML }, afterAction:function(params, query){ //USE LIBS } }); -
mode()
.mode(mode);
router.mode(mode);Mode is property that tells router which type of routing you prefer to use. If you prefer hash (/#/) set mode to null, else pass 'History' into function. By default router uses hash routing. Arguments
mode StringOptional param to determinate witch mode you want to use (# or History). It should equal null or 'history'
var router = new AiRouter(); router.mode('history'); //OR router.mode(null); -
route()
.route(path, options);
router.route(path, options);Execute on current path match this path. Every part of path that start with ':' will be considered for param Arguments
path StringRequred param for path that you want to be routed.
- Example: /posts/comments
If you want to catch parameters in your route you can simply do
- Example: /posts/:postId/comments/:commentId
options ObjectRequred param that hold name and callbacks. Every callback has two parameters: params and query.
params Object
query String- name String
- beforeAction Function
- action Function
- afterAction Function
var router = new AiRouter(); router.go('/posts/comments'); router.route('/posts/comments',{ name:'Comments', beforeAction:function(params, query){ console.log(params); //{} console.log(query); //posts/comments }, action:function(params, query){ console.log(params); //{} console.log(query); //posts/comments }, afterAction:function(params, query){ console.log(params); //{} console.log(query); //posts/comments } }); router.go('/posts/123/comments/321'); router.route('/posts/:postId/comments/:commentId',{ name:'Comments', beforeAction:function(params, query){ console.log(params); //{postId:"123",commentId:"321"} console.log(query); //posts/123/comments/321 }, action:function(params, query){ console.log(params); //{postId:"123",commentId:"321"} console.log(query); //posts/123/comments/321 }, afterAction:function(params, query){ console.log(params); //{postId:"123",commentId:"321"} console.log(query); //posts/123/comments/321 } }); -
group()
.group(prefix, options);
router.group(prefix, options);Execute callbacks every time current path match prefix, before routed callbacks. Arguments
prefix StringRequred param that hold prefix.
options ObjectRequred param that hold name and callbacks. Every callback has two parameters: params and query.
params Object
query String- name String
- beforeAction Function
- action Function
- afterAction Function
var router = new AiRouter(); router.group('/posts',{ name:'Comments group', beforeAction:function(params, query){ console.log(params); //{} console.log(query); //posts/comments }, action:function(params, query){ console.log(params); //{} console.log(query); //posts/comments }, afterAction:function(params, query){ console.log(params); //{} console.log(query); //posts/comments } }); router.route('/posts/:postId/comments/:commentId',{ name:'Comments', beforeAction:function(params, query){ console.log(params); //{postId:"123",commentId:"321"} console.log(query); //posts/123/comments/321 }, action:function(params, query){ console.log(params); //{postId:"123",commentId:"321"} console.log(query); //posts/123/comments/321 }, afterAction:function(params, query){ console.log(params); //{postId:"123",commentId:"321"} console.log(query); //posts/123/comments/321 } }); router.go('/posts/123/comments/321'); -
notFound()
.notFound(options);
router.notFound(options);Execute callbacks every time non of added routes match path. Arguments
options ObjectRequred param that hold name and callbacks. Every callback has two parameters: params and query.
- beforeAction Function
- action Function
- afterAction Function
var router = new AiRouter(); router.notFound({ beforeAction:function(){ //HANDLE NOT ROUTED PATHS }, action:function(){ //HANDLE NOT ROUTED PATHS }, afterAction:function(){ //HANDLE NOT ROUTED PATHS } }) -
go()
.go(path);
router.go(path);Redirect to desire path. Arguments
path StringRequred param that hold path you desire to go.
var router = new AiRouter(); router.go('/home');