an integration between Polymer and Angular with ng-polymer-elements

* npm install -g yo
* npm install generator-polymer -g
* mkdir ng-polymer-test && cd $_
* yo polymer
* npm install grunt
* npm install grunt-contrib-watch
* npm install grunt-replace
* bower install angular
* bower install ng-polymer-elements
* yo polymer:element m-test
* subl app/index.html

<!doctype html>
<html lang="" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>poly foo</title>
<link rel="stylesheet" href="styles/main.css">
http://bower_components/webcomponentsjs/webcomponents.js
http://bower_components/angular/angular.js
http://bower_components/ng-polymer-elements/ng-polymer-elements.js
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="elements/elements.html">
<link rel="import" href="elements/m-test/m-test.html">
</head>

<body unresolved fullbleed layout vertical>

</body>

var app = angular.module('myApp', ['ng-polymer-elements']);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.addresses = [{
"number":"3",
"street":"main",
}];

$scope.myClick = function(event) { alert('Hello'); };

});

angular.module('ng-polymer-elements').constant('$ngPolymerMappings', {
mTest: {
ngModel: {
primitive: 'firstname'
},
ngClick: {
event: 'someEvent'
}

}
});

</html>

* subl app/elements/m-test/m-test.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="m-test" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
Hello from m-test {{firstname}}
<br>

<br>
<input type="checkbox" name="c2" value="c2" id="c2" onchange="myonchange()" >
</template>

(function () {
Polymer({
myonchange:function(){
this.asyncFire("someEvent",{});
},
});
})();

</polymer-element>

* grunt server --force

source https://github.com/irmann/ng-polymer-elements-example

Passing a json data to a Polymer component

index.html

...
<my-post info='{"name":"Alex","id":"123"}' posts='[{"id":"456","name":"post1"},

{"id":"789","name":"post2"}]'></my-post>
...

my-post.html

<link rel="import" href="../../bower_components/polymer/polymer.html">
<polymer-element name="my-post" attributes="info posts" >
<template>
{{info.name}}
<template repeat="{{post in posts}}">
<br>
{{post.id}}
-
{{post.name}}
</template>
</template>
<script>
(function () {
Polymer({
ready: function() {
this.info=JSON.parse(this.info)
this.posts=JSON.parse(this.posts)
},
});
})();
</script>
</polymer-element>

App with Ionic + Polymer


npm install -g cordova ionic
ionic start myApp blank
cd myApp
bower install --save Polymer/polymer#^0.5
bower update
mkdir -p www/elements/my-element
subl www/elements/my-element/my-element.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="my-element" attributes=""> <template>

<span>Hello from <b>my-element</b>.

</template>
<script>
(function () {
Polymer({
// define element prototype here
});
})();
</script>
</polymer-element>

subl www/index.html

...
<head>
...
<link rel="import" href="lib/polymer/polymer.html">
<script src="lib/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/my-element/my-element.html">
...
<body>
...
<my-element></my-element>
...
</body>
</html>

ionic serve