feat(directives): remove the @Controller directive

example/pubspec.lock

@@ -10,15 +10,15 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.11.0"
+    version: "0.14.0"
   args:
     description: args
     source: hosted
     version: "0.10.0+2"
   barback:
     description: barback
     source: hosted
-    version: "0.13.0"
+    version: "0.14.0+3"
   browser:
     description: browser
     source: hosted
@@ -30,72 +30,68 @@ packages:
   collection:
     description: collection
     source: hosted
-    version: "0.9.2"
+    version: "0.9.4"
   di:
     description: di
     source: hosted
-    version: "2.0.1"
+    version: "2.0.2"
   html5lib:
     description: html5lib
     source: hosted
     version: "0.10.0"
   intl:
     description: intl
     source: hosted
-    version: "0.8.10+4"
+    version: "0.11.6"
   logging:
     description: logging
     source: hosted
-    version: "0.9.1+1"
+    version: "0.9.2"
   matcher:
     description: matcher
     source: hosted
-    version: "0.10.0"
-  meta:
-    description: meta
-    source: hosted
-    version: "0.8.8"
-  mock:
-    description: mock
-    source: hosted
-    version: "0.10.0+1"
+    version: "0.11.1"
   path:
     description: path
     source: hosted
-    version: "1.2.1"
+    version: "1.3.0"
   perf_api:
     description: perf_api
     source: hosted
-    version: "0.0.8"
+    version: "0.0.9"
+  quiver:
+    description: quiver
+    source: hosted
+    version: "0.18.2"
   route_hierarchical:
     description: route_hierarchical
     source: hosted
     version: "0.4.22"
   source_maps:
     description: source_maps
     source: hosted
-    version: "0.9.0"
+    version: "0.9.4"
   source_span:
     description: source_span
     source: hosted
     version: "1.0.0"
   stack_trace:
     description: stack_trace
     source: hosted
-    version: "0.9.3+1"
+    version: "0.9.3+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+5"
   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.6.0+1"

example/pubspec.yaml

@@ -5,7 +5,11 @@ dependencies:
     path: ../
   browser: any
   unittest: any
+  quiver: any
   web_components: any
 
 transformers:
-- angular
+- angular:
+    html_files:
+      - web/bouncing_controller.html
+      - web/form_controller.html

example/web/animation.dart

@@ -3,20 +3,29 @@ 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';
 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";
 }
 
+// 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());
@@ -30,5 +39,6 @@ class AnimationDemoModule extends Module {
 main() {
   applicationFactory()
       .addModule(new AnimationDemoModule())
+      .rootContextType(AnimationDemoHashMap)
       .run();
 }

example/web/animation.html

@@ -14,6 +14,7 @@
   </nav>
   <div class="content" ng-switch="demo.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/bouncing_balls.dart

@@ -1,9 +1,10 @@
-import 'package:angular/angular.dart';
-import 'package:angular/application_factory.dart';
 import 'dart:html';
 import 'dart:math';
 import 'dart:core';
 
+import 'package:angular/angular.dart';
+import 'package:angular/application_factory.dart';
+
 var random = new Random();
 var width = 400;
 var height = 400;
@@ -23,23 +24,26 @@ class BallModel {
     }
     return color;
   }
-
 }
 
-@Controller(
-  selector: '[bounce-controller]',
-  publishAs: 'bounce')
+
+@Component(
+  selector: 'bounce-controller',
+  publishAs: 'ctrl',
+  templateUrl: 'bouncing_controller.html',
+  cssUrl: 'bouncing_controller.css'
+)
 class BounceController {
+  RootScope rootScope;
   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(this.rootScope) {
     changeCount(100);
     if (run) tick();
   }
@@ -72,7 +76,7 @@ class BounceController {
   void timeDigest() {
     var start = window.performance.now();
     digestTime = currentDigestTime;
-    scope.rootScope.domRead(() {
+    rootScope.domRead(() {
       currentDigestTime = window.performance.now() - start;
     });
   }
@@ -82,7 +86,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 +128,13 @@ class BallPosition {
 
 class MyModule extends Module {
   MyModule() {
-    bind(BounceController);
     bind(BallPosition);
+    bind(BounceController);
   }
 }
 
 main() {
-  applicationFactory().addModule(new MyModule()).run();
+  applicationFactory()
+      .addModule(new MyModule())
+      .run();
 }

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 bounce.balls"
-             class="{{bounce.ballClassName}}"
-             ball-position="ball"></div>
-    </div>
-
-    <div>
-        <div class="fps-bar">
-            <div class="fps" ng-style-width="bounce.fps*4 + 'px'"></div>
-        </div>
-    </div>
-
-    {{bounce.fps}} fps. ({{bounce.balls.length}} balls) [{{1000/bounce.fps}} ms] <br>
-    Digest: {{bounce.digestTime}} ms<br>
-    <a href ng-click="bounce.changeCount(1)">+1</a>
-    <a href ng-click="bounce.changeCount(10)">+10</a>
-    <a href ng-click="bounce.changeCount(100)">+100</a>
-    <br>
-    <a href ng-click="bounce.changeCount(-1)">-1</a>
-    <a href ng-click="bounce.changeCount(-10)">-10</a>
-    <a href ng-click="bounce.changeCount(-100)">-100</a>
-    <br>
-    <a href ng-click="bounce.playPause()">&#x25B6;&#10073;&#10073;</a> <br>
-    <a href ng-click="bounce.toggleCSS()">Toggle CSS</a><br>
-    <a href ng-click="bounce.timeDigest()">noop</a><br>
-  </div>
+  <bounce-controller></bounce-controller>
 
   <script type="application/dart" src="bouncing_balls.dart"></script>
   <script src="packages/browser/dart.js"></script>

example/web/bouncing_controller.css

@@ -0,0 +1,31 @@
+.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;
+}

example/web/bouncing_controller.html

@@ -0,0 +1,25 @@
+<div class="balls">
+    <div ng-repeat="ball in ctrl.balls"
+         class="{{ ctrl.ballClassName }}"
+         ball-position="ball"></div>
+</div>
+
+<div>
+    <div class="fps-bar">
+        <div class="fps" ng-style-width="ctrl.fps * 4 + 'px'"></div>
+    </div>
+</div>
+
+{{ ctrl.fps }} fps. ({{ ctrl.balls.length }} balls) [{{ 1000 / ctrl.fps }} ms] <br>
+Digest: {{ ctrl.digestTime }} ms<br>
+<a href ng-click="ctrl.changeCount(1)">+1</a>
+<a href ng-click="ctrl.changeCount(10)">+10</a>
+<a href ng-click="ctrl.changeCount(100)">+100</a>
+<br>
+<a href ng-click="ctrl.changeCount(-1)">-1</a>
+<a href ng-click="ctrl.changeCount(-10)">-10</a>
+<a href ng-click="ctrl.changeCount(-100)">-100</a>
+<br>
+<a href ng-click="ctrl.playPause()">&#x25B6;&#10073;&#10073;</a> <br>
+<a href ng-click="ctrl.toggleCSS()">Toggle CSS</a><br>
+<a href ng-click="ctrl.timeDigest()">noop</a><br>