chore(examples): Add a PolymerJS paper component using attribute mappings

jbdeboer · jbdeboer · commit 1ef882c190c5 · 2014-07-30T08:49:00.000-07:00
diff --git a/example/bower.json b/example/bower.json
@@ -0,0 +1,24 @@
+{
+  "name": "paper-example",
+  "version": "0.0.1",
+  "homepage": "https://github.com/angular/angular.dart",
+  "authors": [
+    "James deBoer <james@huronbox.com>"
+  ],
+  "description": "Paper with AngularDart",
+  "main": "web/index.html",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#~0.3.4",
+    "paper-elements": "Polymer/paper-elements#~0.3.4",
+    "core-elements": "Polymer/core-elements#~0.3.4"
+  }
+}
diff --git a/example/web/bower_components b/example/web/bower_components
@@ -0,0 +1 @@
+../bower_components/
diff --git a/example/web/index.html b/example/web/index.html
@@ -6,6 +6,7 @@
       <li><a href="hello_world.html">hello_world.html</a></li>
       <li><a href="todo.html">todo.html</a></li>
       <li><a href="shadow_dom_components.html">shadow_dom_components.html</a></li>
+      <li><a href="paper_progress.html">paper_progress.html</a></li>
     </ul>
   </body>
 </html>
diff --git a/example/web/paper_progress.dart b/example/web/paper_progress.dart
@@ -0,0 +1,13 @@
+import 'package:angular/angular.dart';
+import 'package:angular/application_factory.dart';
+
+
+main() {
+  var injector = applicationFactory()
+      .run();
+  var scope = injector.get(Scope);
+  scope.context['text'] = "Hello future";
+  scope.context['max'] = 20;
+  scope.context['curValue'] = 12;
+  scope.apply();
+}
diff --git a/example/web/paper_progress.html b/example/web/paper_progress.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <!-- 1. Load platform.js for polyfill support. -->
+    <script src="bower_components/platform/platform.js"></script>
+
+    <!-- 2. Use an HTML Import to bring in the element. -->
+    <link rel="import"
+          href="bower_components/paper-progress/paper-progress.html">
+    <script type="application/dart" src="paper_progress.dart"></script>
+    <script src="packages/browser/dart.js"></script>
+  </head>
+  <body>
+    <h2>A quick demo of the Polymer paper-progress widget in an AngularDart app.</h2>
+    <p>The max ({{max}}) and value ({{curValue}}) properties are bound through attribute intropolation</p>
+
+    <p>Text from Angular: <b>{{text}}</b></p>
+    
+    <div>
+      <paper-progress max={{max}} value={{curValue}}></paper-progress>
+    </div>
+     
+    <p>
+      <label>
+        Change the value through an ng-model bound input box:
+        <input type="text" ng-model="curValue">
+      </label>
+     </p>
+  </body>
+</html>
