feat(scope): component is the new context

BREAKING CHANGE:

Scope context is set to the component instance that trigged the creation
of the scope (previously it was of a PrototypeMap.)

Repercussions:
1) You can not inject a scope in a component or in the root context any
more.

As the Scope context is set to the Component instance, the scope could
not be injected any more. Components should implements the "ScopeAware"
interface and declare a "scope" setter in order to get a reference to
the scope.

before:

     @component(...)
     class MyComponent {
       Watch watch;
       Scope scope;

       MyComponent(Dependency myDep, Scope scope) {
          watch = scope.rootScope.watch("expression", (v, p) => ...);
       }
     }

after:

     @component(...)
     class MyComponent implements ScopeAware {
       Watch watch;

       MyComponent(Dependency myDep) {
         // It is an error to add a Scope argument to the
         // ctor and will result in a DI circular dependency error
         // The scope is never accessible in the class constructor
       }

       void set scope(Scope scope) {
          // This setter gets called to initialize the scope
          watch = scope.watch("expression", (v, p) => ...);
       }
     }

or:

     @component(...)
     class MyComponent implements ScopeAware {
       Scope scope;

       MyComponent(Dependency myDep) {
         // It is an error to add a Scope argument to the
         // ctor and will result in a DI circular dependency error
         // The scope is never accessible in the class constructor
       }
     }

2) The parent component to an NgForm must have a "$name" field to store
   the form instance.

closes dart-archive#919
closes dart-archive#917

Author: vicb

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;
   }
 }

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

example/pubspec.yaml

@@ -5,7 +5,6 @@ dependencies:
     path: ../
   browser: any
   unittest: any
-  quiver: any
   web_components: any
 
 transformers:

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();
 }

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>

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;

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 = [];

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];

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;

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();
 }

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>