Monday, August 24, 2015

Using Polymer 1.0 with AngularJs Route

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