/java-script/

Polymer web component & AngularJS. Simple example.

2014-10-23 22:26:19

bower.json

{
  "name": "AnguPolyT1",
  "version": "0.0.1",
  "authors": [
    "szalek 

<szalek@btbw.pl>"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#~0.4.2",
    "angular": "~1.3.0"
  }
}

Simple web component

<polymer-element attributes='"name"' name='"btbw-szalek"'>
<template>
        Text from Angular: <b>{{name}}</b>
</template>
<script>
        Polymer();
    </script>
</polymer-element>

app.js

angular.module('app', [])
    .controller('TextCtrl', function ($scope) {
        $scope.value = 'Czesc !';
    })
;

How to use. index.html

<!DOCTYPE html>

<html>
<head lang='"en"'>
<meta charset="utf-8"/>
<title>AngularJS + Polymer</title>
<script src='"bower_components/angular/angular.min.js"'></script>
<script src='"app.js"'></script>
<link href='"bower_components/polymer/polymer.html"' rel='"import"'/>
<link href='"web-components/szalek.html"' rel='"import"'/>
</head>
<body ng-app='"app"'>
<section ng-controller='"TextCtrl"'>
<input ng-model='"value"' type='"text"'/>
<btbw-szalek name='"{{value}}"'></btbw-szalek>
</section>
</body>
</html>

GitHub