feat(directives): remove the @controller directive

Completely remove the deprecated Controller directive.

Major update to the demos to use setRootContext (where applicable) and
to move to Components for the beefier demos (bouncing balls and form).

A temporary work around was required in demos (animation and todo)
so that rootContext have Map interface. The work arounds will disappear
after the context is set to the component.

Library changes were pulled out of the first commit in #1269.

Closes #1401

Author: rkirov

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>