https://github.com/ergo/polymer-ui-router

UI-router wrapper for Web Components
https://github.com/ergo/polymer-ui-router

javascript polymer router routing ui-router webcomponents

Last synced: 19 days ago
JSON representation

UI-router wrapper for Web Components

• Host: GitHub
• URL: https://github.com/ergo/polymer-ui-router
• Owner: ergo
• License: apache-2.0
• Created: 2016-12-09T19:45:05.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-11-03T12:18:16.000Z (about 6 years ago)
• Last Synced: 2024-11-21T18:41:50.423Z (about 1 month ago)
• Topics: javascript, polymer, router, routing, ui-router, webcomponents
• Language: JavaScript
• Homepage:
• Size: 1.05 MB
• Stars: 22
• Watchers: 4
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

## UI Router Web Component wrapper (using minimal bits from Polymer 3.x base element)

Use https://ui-router.github.io/core/docs/latest/ and https://ui-router.github.io/ 

For general UI-Router documentation.

**Demo page: https://www.webcomponents.org/element/ergo/polymer-ui-router**

UI-Router is one of most popular routing solutions, 

with ports for angular 1.x, 2.x+ and react - now also available for Web Components.

UI-Router provides state based routing. Each feature of an application is defined as a state. One state is active at any time, and UI-Router manages the transitions between the states.

Each state describes the URL, the UI (a view or views), data prerequisites, and other logical prerequisites (such as authentication) for a feature. Before activating a state, UI-Router first fetches any prerequisites (asynchronously), and then activates the view(s) and updates the URL.

UI-Router states are hierarchical; states can be nested inside other states, forming a tree.

Child states may inherit data and behavior (such as authentication) from their parent states.

Some features of UI Router:

* Hierarchical states both abstract and components based

* States can be resolve *(including async)* and activate based on set prerequisites 

* Multiple views per state

* Views can be nested inside other views

* Transition and lifecycle API's

## Example usage

    let routerStates = [

       {name: "index_route", url: "/index", component: "index-comp"},

       {name: "foo", url: "/foo", component: "foo-comp"},

       {name: "arg", url: "/arg/:argumentId?:test", component: "arguments-comp"},

       {name: "user", url: "/bar", component: "bar-comp"},

       {name: "state_a", parent: 'bar.baz', url: "/a", component: "baz-a-comp"},

       {name: "state_b", parent: 'bar.baz', url: "/b", component: "baz-b-comp"}

       ]

    // top-level

    

    

    

    // view level, generates A tags

    Foo (this restomps every click)

    

        With arguments directly

    

    

    // this injects new views based on router state, /index path will 

    // result in  being stomped

    

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. 

Install bower and npm dependencies (quick way is `yarn bower`).

Then run `yarn serve` to serve your application locally.

## TIPS

Set a `` tag in your index.html to let the router know the static/base part of your URL