Step 1:
install polymer form its official site polymer-project.org, best way to download polymer is by using
bower :
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: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
<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:
<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
<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
