Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

autoroute.js

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

autoroute.js

Another lightweight javascript routing framework

  • 1.0.16
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

autoroute.js

This repo is actually evolving to solve the problem of routing in our single page applications, especially on mobile. It's built on top of hashchange wich has a great compatibility.

Changes

1.013/14

  • Some improvements

1.0.12

  • Slide animation with this.anim

1.0.11

  • Full rewrite

1.0.9

  • HammerJS is now part of Autoroute.js, the best way to handle touch gestures.
  • Add link attribute to any html tag, eg : <h1 link="route?query=string">Click Me</h2>.
  • Autoroute.js uses HammerJS tap for link attribute and future interactions.

Usage

1. Main

route.create
route.create(path, callback)

path : string it can be /article
callback : function your module function, to make things when route is matching path

route.start

route.start(path)

path : string it can be /article

2. Module

Inside your module you can do this, see hello-world.js or bye.js in the following :

this.html
this.html += `some html`
this.q
this.html += `Hello ${ this.q.name }` // hello?name=Didier
this.anim
this.anim = true // default 'false'

Every module is rendered once on route.start(). If you have query in your hash, the module will be re-rendered when hash will match module route. If you don't use query in your module and you need to re-render every times :

<li link="path?">Go somewhere<li> <!-- Just add a question mark -->

If you want to modularize your app with ES6 Read the following, explaining modularization with Webpack & Babel.

Get Started with ES6

Basic tree

/src
  index.html
  main.js
  bundle.js // we'll build it
  /components
    hello.js
    bye.js
1. Install dependencies

Assuming npm is installed, in your project folder run :

npm init
npm install -g webpack
npm install babel-loader babel-core babel-preset-es2015 --save-dev
echo '{ "presets": ["es2015"] }' > .babelrc

then install autoroute.js :

npm install autoroute.js
2. Config Webpack & Babel

Edit/Add webpack.config.js in your project root folder as following :

module.exports = {
    entry: "./src/main.js",
    output: {
        path: __dirname + "/src",
        filename: "bundle.js"
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules\/(?!autoroute)/,
          loader: "babel"
        }
      ]
    }
}
3. Some code

index.html

<script src="bundle.js"></script>
<section id="router"></section>

main.js

import route from 'autoroute.js'
import hello from './components/hello'
import bye from './components/bye'

route.create('/hello', helloWorld)
route.create('/bye', bye)
route.start('/hello')

hello-world.js

export default function () {
  this.html += `<h1>Hello ${ this.q.name || 'Anonymous' }<h1>
                <h2 link="bye?name="${ this.q.name || 'Anonymous' }">Quit ?</h2>`
}

bye.js

export default function () {
  this.html += `Bye bye ${ this.q.name || 'Anonymous' }`
}
4. Test/Result

Run webpack and serve your src folder with serve or superstatic or anything else. Then go to http://localhost:port/#/hello?name=Didier the result will be :

Hello Didier
Quit ?

A tap on Quit ? and you're on /bye?name=Didier

Keywords

FAQs

Package last updated on 27 Feb 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc