• 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>
                <span>Home</span>
              </a>
              <a href="#/about">
                <iron-icon icon="info"></iron-icon>
                <span>Users</span>
              </a>
              <a href="#/contact">
                <iron-icon icon="mail"></iron-icon>
                <span>Contact</span>
              </a>
            </paper-menu>
    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; }
      </style>
      <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>
        </div>
      </template>

    <script>
    (function() {
      Polymer({
        is: 'contact-form'
      });
    })();
    </script>
    </dom-module>

    Step 8: register all the elements in the single elements.html page
     elements/elements.html
    Full working code can be found here and demo can be viewd here

    No comments:

    Post a Comment

    Circle

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