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
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
<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
Posts
