Route Manager
A simple routing framework that allows you to load, show, and hide "pages" dynamically when urls within your app are requested without having to refresh the page.
Benefits
- Loads scripts, templates, data, and css files
- Supports Browserify and RequireJS builds
- Caches requests for faster performance
- Supports handlebar templates (.hbs) allowing them to be loaded on the client-side
Prerequisites
Before you begin using, you must setup your server to have all of urls point to your index.html page that will house your code.
Usage
1. Create a container element for your pages
First, create your index.html or similar (if you don't already have one) with at least one html element that your pages will be shown in.
2. Style your divs
When a page url (route) is requested, css classes are applied and removed. So you'll need to setup a few lines of css to show and hide based on the css classes that RouteManager applies.
Of course, you can use fancier CSS transitions if you'd like.
3. Configure your routes
In your javascript file, create a routes object like so:
var routes = pages: '^home(/)?$': template: '/path/to/homepage.html' modules: 'header' 'custom-module' script: 'home-page.js, data: 'url/to/home-page/data modules: 'header': script: 'path/to/header.js'', template: 'path/to/headerhtml', data: 'url/to/my/header/data', global: true }, 'custom-module': { script: 'custom/module/pathjs', template: 'custom/module/templatehtml' } }};
4. Start RouteManager
You must start RouteManager and pass it your routes object to begin listening in on url requests.
var RouteManager = config: routes pagesContainer: documentbody0;
Then, when a user requests the /home
url, the templates, script, modules and data
under your home
routes config entry will load instantly.
If you need to trigger new urls in your javascript programmatically, you can do things like this:
RouteManager;
Important Notes
- Any javascript files that you include in your routes configuration must be "require"-able using either Browserify, RequireJS or any other script loader that exposes a global "require" variable.
- Once a CSS file is loaded, it is loaded infinitely, so it's important to namespace your styles and be specific if you do not want your styles to overlap and apply between pages.