Built on jQuery 1.3.0 & Inspried by (Angular ui-router & jQuery Single Page Application micro framework).
- Tiny
- Single Page Application (SPA)
- Routing
- Seperation Concerns
- Nested Views
Download the jq-router.js file or jq-router.min.js (recommended) file from dist folder and include it in your page either in the <head> section or just before the closing tag of the <body> section after including jquery librar.
> npm install jq-router
$ bower install jq-router
A tiny jQuery plugin for building single page application (SPA) with the possiblily of nested views.
Basic Example
(function () {
var routes = {},
defaultRoute = 'home';
routes['home'] = {
url: '#/',
templateUrl: 'templates/home.html'
};
routes['contact'] = {
url: '#/contact',
templateUrl: 'templates/contact.html'
};
$.router
.setData(routes)
.setDefault(defaultRoute);
$.when($.ready)
.then(function() {
$.router.run('.my-view','home');
});
}());Routes is collection of route objects. Each route object consists of url, templateUrl & each route can be parent route of another route.
var routes = {};
route["parent"] = {
url: '',
abstract: true,
templateUrl: ''
}
route["parent.child"] = {
url: '',
templateUrl: ''
}
route["parent.child.grandchild"] = {
url: '',
templateUrl: ''
}abstract: trueif route has child route & view
url: ''Should be hashed('#') url that can contain accept optional parameters using (:name)
templateUrl: ''Path to render the view in matched view selector.
$.when($.ready)
.then(function() {
$.router.run('.ui-view', 'home');
});Run takes two parameters
- View selector, This will be used to match element & replace the template.
- On Initial load, Navigate to a route.