fix(bouncing balls): fix broken demo

fixes #1550
dart-archive · Dec 16, 2014 · 3eac327 · 3eac327
1 parent 1e9c910
commit 3eac327
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 92 deletions.
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -10,5 +10,5 @@ dependencies:
 transformers:
 - angular:
     html_files:
-      - web/bouncing_controller.html
+      - web/bouncing_balls_tpl.html
       - web/form_controller.html
diff --git a/example/web/bouncing_controller.css → example/web/bouncing_balls.css b/example/web/bouncing_controller.css → example/web/bouncing_balls.css
diff --git a/example/web/bouncing_balls.dart b/example/web/bouncing_balls.dart
@@ -20,14 +20,17 @@ class BallModel {
   static _color() {
     var color = '#';
     for(var i = 0; i < 6; i++) {
-      color += (16 * random.nextDouble()).floor().toRadixString(16);
+      color += random.nextInt(16).toRadixString(16);
     }
     return color;
   }
 }
 
-@Injectable()
-class BounceController implements ScopeAware {
+@Component(
+    selector: 'bouncing-balls',
+    templateUrl: 'bouncing_balls_tpl.html',
+    cssUrl: 'bouncing_balls.css')
+class BouncingBalls implements ScopeAware {
   Scope scope;
   var lastTime = window.performance.now();
   var run = false;
@@ -37,7 +40,7 @@ class BounceController implements ScopeAware {
   var balls = [];
   var ballClassName = 'ball';
 
-  BounceController() {
+  BouncingBalls() {
     changeCount(100);
   }
 
@@ -122,13 +125,12 @@ class BallPosition {
 class MyModule extends Module {
   MyModule() {
     bind(BallPosition);
-    bind(BounceController);
+    bind(BouncingBalls);
   }
 }
 
 main() {
   applicationFactory()
-      .rootContextType(BounceController)
       .addModule(new MyModule())
       .run();
 }
diff --git a/example/web/bouncing_balls.html b/example/web/bouncing_balls.html
@@ -2,68 +2,9 @@
 <html>
 <head>
     <title>Bouncing balls</title>
-    <style>
-        .balls {
-            border: 1px solid black;
-            width: 420px;
-            height: 420px;
-            margin: 5px;
-        }
-
-        .ball {
-            display: inline-block;
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            border: 1px solid black;
-            -webkit-border-radius: 10px;
-            -moz-border-radius: 10px;
-            border-radius: 10px;
-        }
-
-        .fps-bar {
-            width: 200px;
-            height: 10px;
-            border: 1px solid black;
-            display: inline-block;
-            margin-left: 5px;
-        }
-
-        .fps {
-            height: 10px;
-            width: 60px;
-            background-color: green;
-        }
-    </style>
 </head>
 <body ng-app>
-  <div bounce-controller>
-    <div class="balls">
-        <div ng-repeat="ball in balls"
-             class="{{ ballClassName }}"
-             ball-position="ball"></div>
-    </div>
-
-    <div>
-        <div class="fps-bar">
-            <div class="fps" ng-style-width="fps * 4 + 'px'"></div>
-        </div>
-    </div>
-
-    {{ fps }} fps. ({{ balls.length }} balls) [{{ 1000 / fps }} ms] <br>
-    Digest: {{ digestTime }} ms<br>
-    <a href ng-click="changeCount(1)">+1</a>
-    <a href ng-click="changeCount(10)">+10</a>
-    <a href ng-click="changeCount(100)">+100</a>
-    <br>
-    <a href ng-click="changeCount(-1)">-1</a>
-    <a href ng-click="changeCount(-10)">-10</a>
-    <a href ng-click="changeCount(-100)">-100</a>
-    <br>
-    <a href ng-click="playPause()">&#x25B6;&#10073;&#10073;</a> <br>
-    <a href ng-click="toggleCSS()">Toggle CSS</a><br>
-    <a href ng-click="timeDigest()">noop</a><br>
-  </div>
+  <bouncing-balls></bouncing-balls>
 
   <script type="application/dart" src="bouncing_balls.dart"></script>
   <script src="packages/browser/dart.js"></script>

diff --git a/example/web/bouncing_balls_tpl.html b/example/web/bouncing_balls_tpl.html
@@ -0,0 +1,25 @@
+<div class="balls">
+    <div ng-repeat="ball in balls"
+         class="{{ ballClassName }}"
+         ball-position="ball"></div>
+</div>
+
+<div>
+    <div class="fps-bar">
+        <div class="fps" ng-style-width="fps * 4 + 'px'"></div>
+    </div>
+</div>
+
+{{ fps }} fps. ({{ balls.length }} balls) [ {{ fps == 0 ? '-' : (10000 / fps).toInt() / 10 }} ms] <br>
+Digest: {{ (digestTime * 10).toInt() / 10 }} ms<br>
+<button ng-click="changeCount(1)">+1</button>
+<button ng-click="changeCount(10)">+10</button>
+<button ng-click="changeCount(100)">+100</button>
+<br>
+<button ng-click="changeCount(-1)">-1</button>
+<button ng-click="changeCount(-10)">-10</button>
+<button ng-click="changeCount(-100)">-100</button>
+<br>
+<button ng-click="playPause()">&#x25B6;&#10073;&#10073;</button> <br>
+<button ng-click="toggleCSS()">Toggle CSS</button><br>
+<button ng-click="timeDigest()">noop</button><br>
diff --git a/example/web/bouncing_controller.html b/example/web/bouncing_controller.html