dart-archive · rkirov · Jul 16, 2014 · Jul 16, 2014
diff --git a/benchmark/web/tree.dart b/benchmark/web/tree.dart
@@ -5,17 +5,14 @@ import 'package:angular/application_factory.dart';
 import 'package:angular/change_detection/ast_parser.dart';
 
 import 'dart:html';
-import 'dart:math';
 import 'dart:js' as js;
 
 @Component(
     selector: 'tree',
     template: '<span> {{ctrl.data.value}}'
-    '<span ng-if="ctrl.data.right != null"><tree data=ctrl.data.right></span>'
-    '<span ng-if="ctrl.data.left != null"><tree data=ctrl.data.left></span>'
-    '</span>',
-    publishAs: 'ctrl',
-    useShadowDom: true)
+    '<span ng-if="data.right != null"><tree data=data.right></span>'
+    '<span ng-if="data.left != null"><tree data=data.left></span>'
+    '</span>')
 class TreeComponent {
   @NgOneWay('data')
   var data;
@@ -34,9 +31,7 @@ class TranscludingTreeComponent extends TreeComponent {}
 
 @Component(
     selector: 'tree-url',
-    templateUrl: 'tree-tmpl.html',
-    publishAs: 'ctrl',
-    useShadowDom: true)
+    templateUrl: 'tree-tmpl.html')
 class TreeUrlComponent {
   @NgOneWay('data')
   var data;
@@ -209,19 +204,19 @@ class FreeTreeClass {
         s.text = " $v";
       }
     });
-    
+
     scope.watchAST(treeRightNotNullAST, (v, _) {
       if (v != true) return;
       s.append(new SpanElement()
           ..append(new FreeTreeClass(scope, treeRightAST).element()));
     });
-    
+
     scope.watchAST(treeLeftNotNullAST, (v, _) {
       if (v != true) return;
       s.append(new SpanElement()
         ..append(new FreeTreeClass(scope, treeLeftAST).element()));
     });
-    
+
     return elt;
   }
 }

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -18,7 +18,7 @@ packages:
   barback:
     description: barback
     source: hosted
-    version: "0.14.0+3"
+    version: "0.14.2"
   browser:
     description: browser
     source: hosted
@@ -59,6 +59,10 @@ packages:
     description: perf_api
     source: hosted
     version: "0.0.9"
+  pool:
+    description: pool
+    source: hosted
+    version: "1.0.1"
   quiver:
     description: quiver
     source: hosted
@@ -78,7 +82,7 @@ packages:
   stack_trace:
     description: stack_trace
     source: hosted
-    version: "0.9.3+2"
+    version: "1.0.2"
   typed_mock:
     description: typed_mock
     source: hosted

diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -5,7 +5,6 @@ dependencies:
     path: ../
   browser: any
   unittest: any
-  quiver: any
   web_components: any
 
 transformers:

diff --git a/example/web/animation.dart b/example/web/animation.dart
@@ -3,7 +3,6 @@ library animation;
 import 'package:angular/angular.dart';
 import 'package:angular/application_factory.dart';
 import 'package:angular/animate/module.dart';
-import 'package:quiver/collection.dart';
 
 part 'animation/repeat_demo.dart';
 part 'animation/visibility_demo.dart';
@@ -16,29 +15,18 @@ class AnimationDemo {
   var currentPage = "About";
 }
 
-// Temporary workaround, because context needs to extend Map.
-@Injectable()
-class AnimationDemoHashMap extends DelegatingMap {
-  final Map _delegate;
-  AnimationDemoHashMap(AnimationDemo demo) : _delegate = new Map() {
-    _delegate['demo'] = demo;
-  }
-  Map get delegate => _delegate;
-}
-
 class AnimationDemoModule extends Module {
   AnimationDemoModule() {
     install(new AnimationModule());
     bind(RepeatDemo);
     bind(VisibilityDemo);
     bind(StressDemo);
     bind(CssDemo);
-    bind(AnimationDemo);
   }
 }
 main() {
   applicationFactory()
       .addModule(new AnimationDemoModule())
-      .rootContextType(AnimationDemoHashMap)
+      .rootContextType(AnimationDemo)
       .run();
 }
diff --git a/example/web/animation.html b/example/web/animation.html
@@ -6,13 +6,13 @@
 </head>
 <body class="ng-cloak" ng-app animation-demo>
   <nav>
-    <button ng-repeat="page in demo.pages"
-        ng-click="demo.currentPage = page"
-        ng-class="{'current': demo.currentPage == page}">
+    <button ng-repeat="page in pages"
+        ng-click="currentPage = page"
+        ng-class="{'current': currentPage == page}">
       {{page}}
     </button>
   </nav>
-  <div class="content" ng-switch="demo.currentPage">
+  <div class="content" ng-switch="currentPage">
     <div class="demo" ng-switch-default>
 
       <h2>About</h2>

diff --git a/example/web/animation/css_demo.dart b/example/web/animation/css_demo.dart
@@ -4,25 +4,24 @@ part of animation;
     selector: 'css-demo',
     template: '''
       <div class="css-demo">
-        <button ng-click="ctrl.stateA = !ctrl.stateA"
-            ng-class="{'active': ctrl.stateA}">
+        <button ng-click="stateA = !stateA"
+            ng-class="{'active': stateA}">
             Toggle A</button>
-        <button ng-click="ctrl.stateB = !ctrl.stateB"
-            ng-class="{'active': ctrl.stateB}">
+        <button ng-click="stateB = !stateB"
+            ng-class="{'active': stateB}">
             Toggle B</button>
-        <button ng-click="ctrl.stateC = !ctrl.stateC"
-            ng-class="{'active': ctrl.stateC}">
+        <button ng-click="stateC = !stateC"
+            ng-class="{'active': stateC}">
             Toggle C</button>
         <div class="box-container">
           <div class="css-box" ng-class="{
-            'a': ctrl.stateA,
-            'b': ctrl.stateB,
-            'c': ctrl.stateC}">BOX</div>
+            'a': stateA,
+            'b': stateB,
+            'c': stateC}">BOX</div>
           </div>
         </div>
       </div>
-    ''',
-    publishAs: 'ctrl')
+    ''')
 class CssDemo {
   bool stateA = false;
   bool stateB = false;

diff --git a/example/web/animation/repeat_demo.dart b/example/web/animation/repeat_demo.dart
@@ -5,19 +5,17 @@ part of animation;
     useShadowDom: false,
     template: '''
       <div class="repeat-demo">
-      <button ng-click="ctrl.addItem()">Add Thing</button>
-      <button ng-click="ctrl.removeItem()">Remove Thing
-      </button>
+      <button ng-click="addItem()">Add Thing</button>
+      <button ng-click="removeItem()">Remove Thing</button>
       <ul>
-        <li ng-repeat="outer in ctrl.items">
+        <li ng-repeat="outer in items">
           <ul>
-            <li ng-repeat="inner in ctrl.items">{{inner}}</li>
+            <li ng-repeat="inner in items">{{inner}}</li>
           </ul>
         </li>
       </ul>
       </div>
-    ''',
-    publishAs: 'ctrl')
+    ''')
 class RepeatDemo {
   var thing = 0;
   final items = [];

diff --git a/example/web/animation/stress_demo.dart b/example/web/animation/stress_demo.dart
@@ -4,14 +4,13 @@ part of animation;
     selector: 'stress-demo',
     template: '''
       <div class="stress-demo">
-        <button ng-click="ctrl.visible = !ctrl.visible">
+        <button ng-click="visible = !visible">
           Toggle Visibility</button>
         <div>
-          <div class="stress-box" ng-repeat="number in ctrl.numbers"></div>
+          <div class="stress-box" ng-repeat="number in numbers"></div>
         </div>
       </div>
-    ''',
-    publishAs: 'ctrl')
+    ''')
 class StressDemo {
   bool _visible = true;
   final numbers = <int>[1, 2];

diff --git a/example/web/animation/visibility_demo.dart b/example/web/animation/visibility_demo.dart
@@ -4,19 +4,18 @@ part of animation;
     selector: 'visibility-demo',
     template: '''
       <div class="visibility-demo">
-      <button ng-click="ctrl.visible = !ctrl.visible">Toggle Visibility</button>
-      <div class="visible-if" ng-if="ctrl.visible">
+      <button ng-click="visible = !visible">Toggle Visibility</button>
+      <div class="visible-if" ng-if="visible">
         <p>Hello World. ng-if will create and destroy
           dom elements each time you toggle me.</p>
       </div>
-      <div class="visible-hide" ng-hide="ctrl.visible">
+      <div class="visible-hide" ng-hide="visible">
         <p>Hello World. ng-hide will add and remove
           the .ng-hide class from me to show and
           hide this view of text.</p>
       </div>
       </div>
     ''',
-    publishAs: 'ctrl',
     useShadowDom: false)
 class VisibilityDemo {
   bool visible = false;

diff --git a/example/web/bouncing_balls.dart b/example/web/bouncing_balls.dart
@@ -26,15 +26,9 @@ class BallModel {
   }
 }
 
-
-@Component(
-  selector: 'bounce-controller',
-  publishAs: 'ctrl',
-  templateUrl: 'bouncing_controller.html',
-  cssUrl: 'bouncing_controller.css'
-)
-class BounceController {
-  RootScope rootScope;
+@Injectable()
+class BounceController implements ScopeAware {
+  Scope scope;
   var lastTime = window.performance.now();
   var run = false;
   var fps = 0;
@@ -43,9 +37,8 @@ class BounceController {
   var balls = [];
   var ballClassName = 'ball';
 
-  BounceController(this.rootScope) {
+  BounceController() {
     changeCount(100);
-    if (run) tick();
   }
 
   void toggleCSS() {
@@ -76,7 +69,7 @@ class BounceController {
   void timeDigest() {
     var start = window.performance.now();
     digestTime = currentDigestTime;
-    rootScope.domRead(() {
+    scope.rootScope.domRead(() {
       currentDigestTime = window.performance.now() - start;
     });
   }
@@ -135,6 +128,7 @@ class MyModule extends Module {
 
 main() {
   applicationFactory()
+      .rootContextType(BounceController)
       .addModule(new MyModule())
       .run();
 }
diff --git a/example/web/bouncing_balls.html b/example/web/bouncing_balls.html
@@ -2,9 +2,68 @@
 <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>
-  <bounce-controller></bounce-controller>
+  <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>
 
   <script type="application/dart" src="bouncing_balls.dart"></script>
   <script src="packages/browser/dart.js"></script>