fix(bouncing balls): fix broken demo

vicb · rkirov · commit 3eac327e1e9b · 2014-12-15T16:40:24.000-08:00
fixes #1550
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_balls.css b/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

Original file line number	Diff line number	Diff line change
`@@ -20,14 +20,17 @@ class BallModel {`
`20`	`20`	`static _color() {`
`21`	`21`	`var color = '#';`
`22`	`22`	`for(var i = 0; i < 6; i++) {`
`23`		`- color += (16 * random.nextDouble()).floor().toRadixString(16);`
	`23`	`+ color += random.nextInt(16).toRadixString(16);`
`24`	`24`	`}`
`25`	`25`	`return color;`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`
`29`		`-@Injectable()`
`30`		`-class BounceController implements ScopeAware {`
	`29`	`+@Component(`
	`30`	`+ selector: 'bouncing-balls',`
	`31`	`+ templateUrl: 'bouncing_balls_tpl.html',`
	`32`	`+ cssUrl: 'bouncing_balls.css')`
	`33`	`+class BouncingBalls implements ScopeAware {`
`31`	`34`	`Scope scope;`
`32`	`35`	`var lastTime = window.performance.now();`
`33`	`36`	`var run = false;`
`@@ -37,7 +40,7 @@ class BounceController implements ScopeAware {`
`37`	`40`	`var balls = [];`
`38`	`41`	`var ballClassName = 'ball';`
`39`	`42`
`40`		`- BounceController() {`
	`43`	`+ BouncingBalls() {`
`41`	`44`	`changeCount(100);`
`42`	`45`	`}`
`43`	`46`
`@@ -122,13 +125,12 @@ class BallPosition {`
`122`	`125`	`class MyModule extends Module {`
`123`	`126`	`MyModule() {`
`124`	`127`	`bind(BallPosition);`
`125`		`- bind(BounceController);`
	`128`	`+ bind(BouncingBalls);`
`126`	`129`	`}`
`127`	`130`	`}`
`128`	`131`
`129`	`132`	`main() {`
`130`	`133`	`applicationFactory()`
`131`		`- .rootContextType(BounceController)`
`132`	`134`	`.addModule(new MyModule())`
`133`	`135`	`.run();`
`134`	`136`	`}`