refactor: Drop the Controller directive

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

Backard Compatibility breaks:

1) The @controller has been removed

It is possible to define the context of the root scope with:

    applicationFactory()
        ..rootContextType(RootContext)
        ..run();

The root context type needs to be annotated with @Injectable():

    @Injectable()
    class RootContext {
      // ...
    }

2) 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 / RootScope 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.rootScope.watch("expression", (v, p) => ...);
       }
     }

or:

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

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

Author: vicb

benchmark/web/tree.dart

@@ -5,25 +5,22 @@ 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')
+    '<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;
 }
 
 @Component(
     selector: 'tree-url',
-    templateUrl: 'tree-tmpl.html',
-    publishAs: 'ctrl')
+    templateUrl: 'tree-tmpl.html')
 class TreeUrlComponent {
   @NgOneWay('data')
   var data;
@@ -189,19 +186,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

@@ -4,61 +4,61 @@ packages:
   analyzer:
     description: analyzer
     source: hosted
-    version: "0.13.6"
+    version: "0.18.0"
   angular:
     description:
       path: ".."
       relative: true
     source: path
-    version: "0.11.0"
+    version: "0.12.0"
   args:
     description: args
     source: hosted
     version: "0.10.0+2"
   barback:
     description: barback
     source: hosted
-    version: "0.13.0"
+    version: "0.14.1+3"
   browser:
     description: browser
     source: hosted
     version: "0.10.0+2"
   code_transformers:
     description: code_transformers
     source: hosted
-    version: "0.1.3"
+    version: "0.1.6"
   collection:
     description: collection
     source: hosted
-    version: "0.9.2"
+    version: "0.9.4"
   di:
     description: di
     source: hosted
-    version: "1.1.0"
+    version: "2.0.1"
   html5lib:
     description: html5lib
     source: hosted
     version: "0.10.0"
   intl:
     description: intl
     source: hosted
-    version: "0.9.9"
+    version: "0.8.10+4"
   logging:
     description: logging
     source: hosted
-    version: "0.9.1+1"
+    version: "0.9.2"
   matcher:
     description: matcher
     source: hosted
-    version: "0.10.0"
-  mock:
-    description: mock
+    version: "0.11.0"
+  meta:
+    description: meta
     source: hosted
-    version: "0.10.0+1"
+    version: "0.8.8"
   path:
     description: path
     source: hosted
-    version: "1.2.1"
+    version: "1.2.2"
   perf_api:
     description: perf_api
     source: hosted
@@ -70,20 +70,24 @@ packages:
   source_maps:
     description: source_maps
     source: hosted
-    version: "0.9.0"
+    version: "0.9.3"
   stack_trace:
     description: stack_trace
     source: hosted
-    version: "0.9.3+1"
+    version: "1.0.2"
+  typed_mock:
+    description: typed_mock
+    source: hosted
+    version: "0.0.4"
   unittest:
     description: unittest
     source: hosted
-    version: "0.10.1+2"
+    version: "0.11.0+3"
   utf:
     description: utf
     source: hosted
-    version: "0.9.0"
+    version: "0.9.0+1"
   web_components:
     description: web_components
     source: hosted
-    version: "0.3.3"
+    version: "0.3.5+1"

example/web/animation.dart

@@ -9,9 +9,7 @@ part 'animation/visibility_demo.dart';
 part 'animation/stress_demo.dart';
 part 'animation/css_demo.dart';
 
-@Controller(
-    selector: '[animation-demo]',
-    publishAs: 'demo')
+@Injectable()
 class AnimationDemo {
   final pages = ["About", "ng-repeat", "Visibility", "Css", "Stress Test"];
   var currentPage = "About";
@@ -24,11 +22,11 @@ class AnimationDemoModule extends Module {
     bind(VisibilityDemo);
     bind(StressDemo);
     bind(CssDemo);
-    bind(AnimationDemo);
   }
 }
 main() {
   applicationFactory()
       .addModule(new AnimationDemoModule())
+      .rootContextType(AnimationDemo)
       .run();
 }

example/web/animation.html

@@ -6,14 +6,15 @@
 </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>
       <p>The NgAnimate module is a port with modifications of the original
         AngularJS animation module. The default implementation does nothing.
@@ -22,6 +23,7 @@ <h2>About</h2>
         added it allows you define and run css animations on your elements with
         pure CSS.</p>
       <p>Check out the demos above.</p>
+
     </div>
     <div class="demo" ng-switch-when="ng-repeat">
       <h2>ng-repeat Demo</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',
     applyAuthorStyles: true)
 class CssDemo {
   bool stateA = 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',
     applyAuthorStyles: true)
 class RepeatDemo {
   var thing = 0;

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',
     applyAuthorStyles: true)
 class StressDemo {
   bool _visible = true;

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,20 +26,18 @@ class BallModel {
 
 }
 
-@Controller(
-  selector: '[bounce-controller]',
-  publishAs: 'bounce')
-class BounceController {
+@Injectable()
+class BounceController implements ScopeAware {
+  Scope scope;
   var lastTime = window.performance.now();
   var run = false;
   var fps = 0;
   var digestTime = 0;
   var currentDigestTime = 0;
   var balls = [];
-  final Scope scope;
   var ballClassName = 'ball';
 
-  BounceController(this.scope) {
+  BounceController() {
     changeCount(100);
     if (run) tick();
   }
@@ -82,7 +80,7 @@ class BounceController {
     var delay = now - lastTime;
 
     fps = (1000/delay).round();
-    for(var i=0, ii=balls.length; i<ii; i++) {
+    for(var i = 0; i < balls.length; i++) {
       var b = balls[i];
       b.x += delay * b.velX;
       b.y += delay * b.velY;
@@ -124,11 +122,13 @@ class BallPosition {
 
 class MyModule extends Module {
   MyModule() {
-    bind(BounceController);
     bind(BallPosition);
   }
 }
 
 main() {
-  applicationFactory().addModule(new MyModule()).run();
+  applicationFactory()
+      .rootContextType(BounceController)
+      .addModule(new MyModule())
+      .run();
 }