• Latest Code...

    Intregating Polymer With Angular JS Routing

    Step 1:
    install polymer form its official site polymer-project.org, 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="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></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


    Most recent Elastic Search tutorials for beginner, intermediate and advance level developer, Yubraj Pokharel, in CodingWorkspace