oo-routes

Polymer elements for declarative and self-describing routing.

Table of Contents:

• Usage
• Examples
• Patterns
• Semantic Versions

Usage

$ bower install --save oolymer/oo-routes
$ bower install --save PolymerElements/app-location
$ bower install --save PolymerElements/iron-pages

<link rel="import" href="../oo-routes/oo-router.html">
<link rel="import" href="../oo-routes/oo-route.html">
<link rel="import" href="../app-route/app-location.html">
<link rel="import" href="../iron-pages/iron-pages.html">

<app-location route="{{route}}" use-hash-as-path></app-location>

<oo-router
    route-path"{{route.path}}"
    attr-for-selected="name"
    selected="{{routeName}}"
    params="{{routeParams}}">
  <oo-route name="foo" use-regexp pattern="/foo"></oo-route>
  <oo-route name="bar" use-regexp pattern="/bar"></oo-route>
  <oo-route name="baz" use-regexp pattern="/baz/(.+)"></oo-route>

  <oo-route name="default" use-regexp pattern="^$"></oo-route>
  <oo-route name="error" use-regexp pattern="(.*)"></oo-route>
</oo-router>

<iron-pages
    attr-for-selected="name"
    selected="[[routeName]]">
  <div name="foo">foo</div>
  <div name="bar">bar</div>
  <div name="baz">baz</div>
  <div name="error">error</div>
</iron-pages>

Examples

Simple routes.

<oo-router route="/bar">
  <oo-route pattern="/foo"></oo-route>
  <oo-route pattern="/bar"></oo-route>
</oo-router>

Routes with regular expression patterns.

<oo-router attr-for-selected="name" route-path="/baz/quux">
  <oo-route name="foo" use-regexp pattern="/foo"></oo-route>
  <oo-route name="bar" use-regexp pattern="/bar"></oo-route>
  <oo-route name="baz" use-regexp pattern="/baz/(.+)"></oo-route>
</oo-router>

Routes with patterns.

<oo-router attr-for-selected="name" route-path="/baz/quux">
  <oo-route name="foo" pattern="/foo"></oo-route>
  <oo-route name="bar" pattern="/bar"></oo-route>
  <oo-route name="baz" pattern="/baz/:path"></oo-route>
</oo-router>

Patterns

Every HTTP URL conforms to the syntax of a generic URI. A generic URI is of the form:

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

Patterns	Route	Matched Route	Matched Params
<oo-route name="foo" pattern="/foo"> <oo-route name="bar" pattern="/bar">	{ path: "/foo" }	foo	{}
{ foo: "/foo", bar: "/bar" }	{ path: "/foo" }	foo	{}
{ foo: "/foo", bar: "/bar" }	{ path: "/bar" }	bar	{}
{ foo: "/foo", bar: "/bar" }	{ path: "/baz" }	none	{}

Semantic Versions

• Version number format MAJOR.MINOR.PATCH, e.g. "1.5.3".
• Increase MAJOR for breaking changes.
• Increase MINOR for new features.
• Increase PATCH for bug fixes.