Angular and Polymer, sitting in a DOM tree,

B-i-n-d-i-n-g.

First comes components,

Then comes elements,

Then comes the interop with the node dot bind.

<polymer-element> - convenient way to declare custom elements

widgets

polyfills for new web platform features

encapsulation for the DOM

built on emerging web standards

Interop

DOM interop

cool

{{cool}}

<polymer-element name="my-element"> <template> <p> <input type="text" value="{{message}}"> Polymer binding: {{message}} </p> </template> <script type="application/dart" src="my_element.dart"></script> </polymer-element>

cool

Data binding interop

Node.bind() takes care of setting up the binding, including two-way bindings, eliminating the need for directives for every property for two-way bindings.

Custom elements that expose properties will be properly bound, again including two-way bindings. You can use the growing collection of custom element libraries in your Angular app.

name: angularpolymer description: A demo of Angular and Polymer data binding. dependencies: angular: any angular_node_bind: any browser: any polymer: any transformers: - polymer: entry_points: web/angularpolymer.html

import 'package:polymer/polymer.dart' show initPolymer; import 'package:angular/angular.dart' show ngBootstrap; import 'package:angular_node_bind/angular_node_bind.dart' show NodeBindModule; void main() { initPolymer().run(() { ngBootstrap(module: new NodeBindModule()); }); }

<my-element message="[[cool]]"></my-element>

[[cool]]

{{cool}}

Summary

Get the source code