❤
npm
Sign UpSign In

This package has been deprecated

Author message:

This package is deprecated. Please use the new router-js package instead

route-manager

3.2.1 • Public • Published

Build Status

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.

<html>
    <body>
        <div class="page-container"></div>
    </body>
</html>

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.

.page {
    display: none;
}
 
.page-active {
    display: block;
}

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/header.html',
            data: 'url/to/my/header/data',
            global: true
        },
        'custom-module': {
            script: 'custom/module/path.js',
            template: 'custom/module/template.html'
        }
    }
};
 

4. Start RouteManager

You must start RouteManager and pass it your routes object to begin listening in on url requests.

var RouteManager = require('route-manager')({
    config: routes,
    pagesContainer: document.body.getElementsByClassName('page-container')[0]
});

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.triggerRoute('home').then(function () {
   // home page element has been injected into DOM and active class has been applied
});

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.

Readme

Keywords

Package Sidebar

Install

npm i route-manager

Repository

github.com/mkay581/route-manager

Homepage

github.com/mkay581/route-manager#readme

Weekly Downloads

36

Version

3.2.1

License

MIT

Last publish

Collaborators

  • test
Try on RunKit
Report malware