Polymer 1.0 - routing

Question

I'm new to Polymer. I start writing a simple webapp in which 1. User first land in a login page 2. If user passes login, then direct user to content page

I write an element "login"

<dom-module id="login">
  <template>
    <!-- local DOM for your element -->
    <p>Username</p>
    <input class="paper-font-body2" value="{{email::change}}" type="email">
    <br/>
    <p>Password</p>
    <input class="paper-font-body2" value="{{password::change}}" type="password">
    <p>{{errorMessage}}</p>

    <iron-ajax
      id="ajax"
      url=""
      method="POST"
      on-response="signInResponse"
      debounce-duration="300">
    </iron-ajax>

    <button on-click="signIn">Signin</button>
  </template>
</dom-module>

<script>
  // element registration
  Polymer({
    is: "login",

    // add properties and methods on the element's prototype
    properties: {
      // declare properties for the element's public API
      email: {
        type: String,
        value: "username"
      },
      password: {
        type: String,
        value: "password"
      },
      errorMessage: {
        type: String,
        value: ""
      }
    },

    signIn: function() {
      this.$.ajax.url = "http://myserver/login/email";
      this.$.ajax.params = {"email":this.email, "password": this.password};
      this.$.ajax.generateRequest();
    },

    signInResponse: function(request) {
      response = request.detail.response;
      console.log(response);
      if (response.code == '0') {
        this.fire("signin-success", response);
      } else {
        this.fire("signin-fail", response);
      }
    }
  });
</script>

On index.html (main page), I use

<self-login
      sign-in-success="onSignedIn"
      ></self-login>

Question: in the onSignedIn() callback, I would route my page to /content. How can I do?

EDIT 1: As @zacharytamas suggest, I try to use app-router as following

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>app-router</title>
  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="stylesheet" href="styles/main.css" shim-shadowdom>
  <link rel="import" href="../bower_components/app-router/app-router.html">
</head>
<body unresolved>
<app-router>
  <app-route path="/" import="/elements/home-page.html"></app-route>
  <app-route path="/test" import="/elements/home-page.html"></app-route>
  <app-route path="*" import="/elements/not-found-page.html"></app-route>
</app-router>

<script src="scripts/app.js"></script>

</body>
</html>

home-page.html

<dom-module  id="home-page" noscript>
  <template>
    <h2>Hello</h2>
  </template>
</dom-module>

It shows a blank page when I browse to both http://localhost:3000/ and http://localhost:3000/test on Chrome. Any idea?

score 26 · Accepted Answer · answered Jun 05 '15 at 17:45

26

Polymer does not have routing built into it by default. There are several front-end routing frameworks you can use with Polymer, however.

A very commonly used approach is a custom element called app-router, which lets you define routes declaratively with just HTML alone. I've had some success with it before. Check out the websitefor information on setting it up.

Another HTML-based way of doing it is a custom element made by a member of the Polymer team called more-routing. Google has a video series about Polymer called Polycasts which made a video explaining the more-routing approach. You should check that video out for info about getting started.

Another option is to do it with JavaScript using the page.js framework. This is the method used the Polymer Starter Kit. Here's another Polycast to get you started on that way.

Welcome to the Polymer world!

answered Jun 05 '15 at 17:45

zacharytamas

1,039
7
11

It seems that app-rooter not yet supports Polymer 1.0 – Bao Le Jun 06 '15 at 02:17
Hmm. I used it with Polymer 0.9 last week and the API between 0.9 and 1.0 is very similar. Do you get an error or does it just not work? – zacharytamas Jun 06 '15 at 19:49
Yes, I've issue with app-router. See my EDIT on the question – Bao Le Jun 09 '15 at 11:36
1

I wrote dna-router, inspired by Angluar's UI-router, that works with Polymer^1.0. It lets you declare routes in HTML and also it is much user friendly. https://github.com/Saquib764/dna-router/ – codedemon Jan 16 '16 at 10:17
1

Looks like a router is on the roadmap for 2016 from polymer team. https://blog.polymer-project.org/announcements/2016/02/16/2016-roadmap/ – gazal May 03 '16 at 09:22
1

Good news! the Polymer team has released an official router. https://www.polymer-project.org/1.0/blog/routing Please upvote my new answer below :D – Eric Knudtson Jun 11 '16 at 00:41

Eric Knudtson · Answer 2 · 2016-06-13T16:55:49.277

Good news! The Polymer team has released an official router. An excellent introduction is available on their blog:

https://www.polymer-project.org/1.0/blog/routing

And the Readme.md on the Github repo is quite instructive:

https://github.com/PolymerElements/app-route

There are two elements necessary for basic functionality, <app-location> and <app-route>

The following is a simple example:

<app-location route="{{route}}"></app-location>
<app-route
    route="[[route]]"
    pattern="/users"
    active="{{usersRouteIsActive}}">
</app-route>

In the above example usersRouteIsActive will receive a boolean value, true if the route matches /users, and false if it does not. Simple, right? After this, as your application's routes get more complicated the app-route element has more features that will support those needs.

score 2 · Answer 3 · answered Jul 06 '15 at 01:54

Try using 'dna-router'. Its relatively new and supports Polymer-1.0. You can create routing purely in html.

Dna-router also supports user-authentication. You can pass login status and loggedin data in its 'dna-config' element. Router will show page based on login status. You can declare which states need user authentication.

Its still under development and have some glitches in it. But worth giving a try.

Github: https://github.com/Saquib764/dna-router/

Aleksandar Totic · Answer 4 · 2015-10-20T16:28:16.077

2

The answer depends on the kind of router you use. I was unhappy with the state of Polymer routers, so I wrote excess-router. With this router, you would:

define your routes, and make /content is a default route
configure router to be started manually
start the router manually on signin

<excess-router-config manual-start></excess-router-config>
<excess-route route="/content"></excess-route>
<excess-route route="/(.*)" redirect-to="/content" activation-modifiers="x"></excess-route>

<script>
  function onSignedIn() {
    Excess.RouteManager.start();
  }
</script>

edited Oct 20 '15 at 16:28

answered Oct 20 '15 at 16:21

Aleksandar Totic

2,557
25
27

1

Have not played too much, but it seems to actually work with 1.0, which is better than any of the options touted in the accepted answer. – Michael.Lumley Nov 10 '15 at 12:33

score 1 · Answer 5 · answered Dec 06 '15 at 15:44

I solving this problem just adding in page template this code:

<script>
    Polymer({
        is: 'home-page'
    });
</script>

Full page code:

<link href="../bower_components/polymer/polymer.html" rel="import">
<dom-module id="home-page">
   <template>
      <div>Home page</div>
   </template>

   <script>
      Polymer({
         is: 'home-page'
      });
   </script>
</dom-module>

AlexO · Answer 6 · 2017-08-25T03:02:19.700

As of Polymer 1.4, carbon-route (later renamed app-route) can be used:

Here's an example taken from the polymer blog:

<carbon-location route="{{route}}">
</carbon-location>

<carbon-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}">
</carbon-route>

<paper-tabs selected="{{data.tabName}}" attr-for-selected="key">
  <paper-tab key="foo">Foo</paper-tab>
  <paper-tab key="bar">Bar</paper-tab>
  <paper-tab key="baz">Baz!</paper-tab>
</paper-tabs>

<neon-animated-pages selected="{{data.tabName}}"
                     attr-for-selected="key"
                     entry-animation="slide-from-left-animation"
                     exit-animation="slide-right-animation">
  <neon-animatable key="foo">Foo Page Here</neon-animatable>
  <neon-animatable key="bar">Bar Page Goes Here</neon-animatable>
  <neon-animatable key="baz">Baz Page, the Best One of the Three</neon-animatable>
</neon-animated-pages>

See also similar question: Routing in polymer 1.0

Polymer 1.0 - routing

6 Answers6

Linked