https://github.com/phenax/oxyrouter
OxyRouter is a javascript plugin for making hash routing easy as pie.
https://github.com/phenax/oxyrouter
client-side-routing hash js-library router
Last synced: 5 months ago
JSON representation
OxyRouter is a javascript plugin for making hash routing easy as pie.
- Host: GitHub
- URL: https://github.com/phenax/oxyrouter
- Owner: phenax
- License: apache-2.0
- Created: 2016-01-02T14:35:00.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T14:25:16.000Z (about 8 years ago)
- Last Synced: 2025-01-16T19:52:20.713Z (over 1 year ago)
- Topics: client-side-routing, hash, js-library, router
- Language: HTML
- Homepage: https://phenax.github.io/oxyrouter
- Size: 297 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
OxyRouter
======
OxyRouter is a simple plugin for making front-end routes super-easy to make and use. [DEMO](http://phenax.github.io/oxyrouter)
So, no more running to the backend just to make unnecessary routes that don't do much. And if you're making a static website, this will make the application much faster by cutting back the requests made to the server and only receiving the information you need.
It integrates with handlebars to render templates. You can render templates from script tags as well as partial template files.
## Guide
####Installing OxyRouter
We haven't uploaded it to any repositories or cdn's yet but you can still use it by adding the following script tags in your html
```html
```
####Initiating OxyRouter
```javascript
var router= new OxyRouter({
otherwise: '/',
page: '.container',
defaultTitle: 'My Website'
});
```
- `new OxyRouter` is where it all starts.
- `otherwise: '/'`. This redirects requests from undefined routes to '/'.
- `page: '.container'`. Here, '.container' is css selector for the div where you want the contents to be placed.
- `defaultTitle: 'My Website'`. This sets the default title for all routes that a user navigates to.
####Create a route
```javascript
router.route({
name: 'about',
title: 'About Us',
url: '/about',
template: '#about',
data: {
info: "Hello"
}
});
```
- ```router.route``` is used to create a route.
- ```name: 'about'```. Used to identify your route(doesn't matter what it is).
- ```title: 'About Us'```. It is the title of the page when a user navigates to that route.
- ```url: '/about'```. Create a route at the url //oxyrouter/#/about.
- ```template: '#about'```. CSS selector for the template.
- ```data: { info: "Hello" }```. Rendering text.
*Other stuff you can try*
- ```text: "Hello"```. To be used instead of template for rendering text.
- ```template_url: "./part.html"```. To be used instead of template for templating using an html file.
- ```success: function() { alert("Done"); }```. This will be executed everytime the template is done rendering. This is only used with template_url.
- ```sub: function(r) { }```. This function is a sub-router. You can use it to create url for specific posts (Eg- /post/2 or /user/akshay) and 'r' is the id(the '2' in /post/2) (Example given below).
####Subrouting example
```javascript
var getPostFromServer= function(pid) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
fn(xhttp.responseText);
} else {
fn(new Error("Sorry, bruh... Something went wrong."));
}
};
xhttp.open("GET", "/post/"+pid, true);
xhttp.send();
};
// This is the important part!
router.route({
name: 'post',
url: '/post',
template: '#about',
data: {
info: "Hello"
},
sub: function(pid) {
var post= getPostFromServer(pid,function(data) {
router.render_text('#post-template',{ post: data });
});
}
});
```
- ```getPostFromServer(pid)``` is your function that interacts with the - server and returns the data required.
- ```router.render_text(.....)``` allows you to render stuff to container yourself. NOTE: The template will still be rendered in the '.container' that was declared in the initiation.
####Psuedo GET Requests
```javascript
router.route({
name: 'post',
url: '/post',
template: '#about',
data: { },
get: function(data) {
if(data.pid && data.page) {
var post= getPostFromServer(data.pid,data.page);
router.render_text('#post-template',{ post: post });
} else {
// For no request
}
}
});
```
```get: function(data) { ...```. This function can be used to perform actions on the requests made and give the user an output.
```getPostFromServer(pid)``` is your function that interacts with the server and returns the data required.
```router.render_text(.....)``` allows you to render stuff to container yourself. NOTE: The template will still be rendered in the '.container' that was declared in the initiation.
####My work here is done
Thats it. You're good to go.
## Contact Me
Follow me on [Codepen](http://codepen.io/phenax),[Github](https://github.com/phenax),[Twitter](https://twitter.com/phenax5)