Skip to content

erikringsmuth/polymer-router-demos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Polymer Router Demos

Examples showing the major concepts for routing in Polymer.

Download and un-zip polymer-router-demos.

no-router (live demo)

A router is completely optional. You can load HTML files directly.

  1. Open a terminal in the no-router directory
  2. Start the express.js server with node server.js
  3. Open http://localhost:8080/

app-router (live demo)

The <app-router> adds data binding and can lazy-load content. It's similar to the Angular ui-router and Backbone's router.

  1. Open a terminal in the app-router directory
  2. Start the express.js server with node server.js
  3. Open http://localhost:8080/

flatiron-director (live demo)

<flatiron-director> with <core-animated-pages> and a modified version of Polymer's music demo. This routes like a mobile app.

  1. Open a terminal in the flatiron-director directory
  2. Start the express.js server with node server.js
  3. Open http://localhost:8080/

excess-router (live demo)

excess-router is a Polymer 1.0 compatible router. Implements express-style path patching, route transition lifecycle, and a JS routing library similar to page.js.

Notes

The choice comes down to complexity. If you don't need data binding you probably don't need a router.

Polymer's <core-animated-pages> extends <core-selector> so you use the <core-selector> attributes to choose a route. Routes can be integers or strings. They are smiple enough to store in a URL hash #. Two way data binding can auto update the hash when you use <flatiron-director autoHash>. This works well for websites that operate like a mobile app and you want a simple hash to store your <core-selector> state.

<app-router> lazy loads content, data binds path variables and query parameters, and uses pushState() or hashchange events. It handles more complex routes and is more like Angular's ui-router and Backbone's router.

You can also use a server-side router and template engine and only use custom elements for specific parts of the page.

You have a ton of options! Use the tool that best fits the job.

More ideas? Let me know @ErikRingsmuth!

About

Demo routing with Polymer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published