A javascript router inspired by ngRoute module.
// Instantiate a new Router
// Primary - Provide view element that you want your app to run in
// Secondary - Provide a view element the app should load templates into
var myRouter = new JSRoute('.jsroute-app', '.jsroute-view');
// Set up paths
myRouter.config(function(routeProvider) {
routeProvider
.when('/', {
templateUrl: 'path/to/template',
onLoad: function(rootElement, location) {
// This function will fire after the template has loaded
}
})
.when('/another/:group', {
templateUrl: 'path/to/template',
onLoad: function(rootElement, location) {
}
})
// In case path doesn't match any of the registered routes, it redirects to a another route
.otherwise('/');
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My app</title>
</head>
<!-- Declare the root app element -->
<body class="jsroute-app">
<!-- Declare the view element -->
<div class="jsroute-view">
</div>
</body>
<script type="text/javascript" src="jsRoute.min.js"></script>
</html>Type: function, Parameters: string, creates a new router with the given selectors.
-
rootElement Type:
stringDefault:.jsroute-appselector for the root element -
viewElement Type:
stringDefault:.jsroute-viewselector for the view element
Type: function, Parameters: object, provides are provider to set up the paths to your app
Type: object, the provider to register new routes.
Object properties:
whenType:function, Parameters:string,object, registers a new path with path optionsotherwiseType:Function, Parameters:string, registers a fallback path
-
path - Type:
stringRoute path. When a link is clicked or a browser history event is invoked (back, forward) the router emits a
routeChangeevent on his root element. Supports groups, e.g.:idall characters until the next slash will be stored in thelocationobject as parameter. Example:/group/:idwill match/group/123456and store the ID inside oflocationobject asid: 123456
-
options - Type:
objectObject properties:
templateUrlType:string, a relative path where to find the template that should load when a path is matched.cacheType:string,default:false, if set totruewill cache the template for that route, and load the template from a cache instead.onLoadType:function, a function that is invoked after the template has been loaded into the view. The function has its own parameters:rootElement,location.
-
onLoad rootElement - Type:
object, the root element of the app. -
onLoad location - Type:
object, the current location object.
Object properties:
hashType:stringprotocolType:stringhostType:stringhrefType:stringpathnameType:stringoriginType:stringsearchType:stringhostnameType:stringmatchingPathType:stringparamsType:objectpathType:functionParameters:string, will redirect to any new path given. Checks to see if it's on the same host, if so, starts a newrouteChangeevent.
- path - Type:
string, a fallback path that the router redirects to in the case that no routes were matched.
- Git
- Node.js and npm Node ^4.2.3, npm ^2.14.7
- [Bower] (http://bower.io) (
npm install -g bower) - Grunt (
npm install --global grunt-cli)
- Run
npm install - Run
bower install - Run
gruntorgrunt buildto build the router - Run
grunt serveto build the router & start a web server - Server us served on
localhost:9000
- Write a better documentation
- Write tests
- Improve the private HTTP module
- Add page transition support
- Improve route pattern support