Intregating Polymer With Angular JS Routing

Step 1:
install polymer form its official site, best way to download polymer is by using
bower : bower install --save Polymer/polymer#^1.0.0

Step 2:
set up your site's main page i.e index.html using the components what you like. You can see the code of my index.html file here

Step 3:
Now add the angular js plugins in the end of header in index page as below
<script src="//"></script>
<script src="//"></script>

Step 4:
Now create angular app by initiating it by using ng-app="shaharma"in the body tag
<body  unresolved class="fullbleed layout vertical" ng-app="shaharma">

Step 5:
We are going to do route by using the hash(#) routing technique. Now update the link tag with # link tag as below:

     <paper-menu class="list" >
          <a href="#/">
            <iron-icon icon="home"></iron-icon>
          <a href="#/about">
            <iron-icon icon="info"></iron-icon>
          <a href="#/contact">
            <iron-icon icon="mail"></iron-icon>
Now create a file named angular.js where we are going to add the route technique for our website. The final code is here

Step 6:
define a content area where the view are tobe loaded by using  ng-view
<div class="content" ng-view></div>

Step 7:
Now lets create a webelements which are going to be displayed inthe content section during the routing:
inside the elements folder we can see the web components for the different view which can be view here
example : for contact-form view

<dom-module id="contact-form">
  <style is="custom-style">
      paper-card {width: 100%-20px;margin: 10px;}
      #heading{color: #313131;font-size: 16px;font-weight: bold;
      .content.paper-button {padding: 0; }
  <template is="dom-bind">
    <h4>Character counter</h4>
    <div class="vertical-section">
      <paper-input label="label" char-counter></paper-input>
      <paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]*" maxlength="10" error-message="letters only!"></paper-input>
      <paper-textarea label="textarea" char-counter></paper-textarea>
      <paper-textarea label="textarea with maxlength" char-counter maxlength="10"></paper-textarea>
      <paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"><paper-textarea>

(function() {
    is: 'contact-form'

Step 8: register all the elements in the single elements.html page
Full working code can be found here and demo can be viewd here
Intregating Polymer With Angular JS Routing Intregating Polymer With Angular JS Routing Reviewed by yubraj pokharel on 12:10 PM Rating: 5

No comments:

Powered by Blogger.