refactor: Drop the Controller directive

closes dart-archive#919 closes dart-archive#917 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 } }
vicb · Jul 14, 2014 · a539545 · a539545
1 parent f567e99
commit a539545
Show file tree

Hide file tree

Showing 61 changed files with 818 additions and 886 deletions.
diff --git a/example/web/animation.dart b/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();
 }
diff --git a/example/web/animation.html b/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>

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',
     applyAuthorStyles: true)
 class CssDemo {
   bool stateA = 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',
     applyAuthorStyles: true)
 class RepeatDemo {
   var thing = 0;

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

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,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();
 }
diff --git a/example/web/bouncing_balls.html b/example/web/bouncing_balls.html
@@ -39,30 +39,30 @@
 <body ng-app>
   <div bounce-controller>
     <div class="balls">
-        <div ng-repeat="ball in bounce.balls"
-             class="{{bounce.ballClassName}}"
+        <div ng-repeat="ball in balls"
+             class="{{ ballClassName }}"
              ball-position="ball"></div>
     </div>
 
     <div>
         <div class="fps-bar">
-            <div class="fps" ng-style-width="bounce.fps*4 + 'px'"></div>
+            <div class="fps" ng-style-width="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>
+    {{ 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="bounce.changeCount(-1)">-1</a>
-    <a href ng-click="bounce.changeCount(-10)">-10</a>
-    <a href ng-click="bounce.changeCount(-100)">-100</a>
+    <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="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>
+    <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>

diff --git a/example/web/hello_world.dart b/example/web/hello_world.dart
@@ -1,15 +1,13 @@
 import 'package:angular/angular.dart';
 import 'package:angular/application_factory.dart';
 
-@Controller(
-    selector: '[hello-world-controller]',
-    publishAs: 'ctrl')
+@Injectable()
 class HelloWorld {
   String name = "world";
 }
 
 main() {
   applicationFactory()
-      .addModule(new Module()..bind(HelloWorld))
+      .rootContextType(HelloWorld)
       .run();
 }
diff --git a/example/web/hello_world.html b/example/web/hello_world.html
@@ -5,8 +5,8 @@
 </head>
 <body hello-world-controller>
 
-<h3>Hello {{ctrl.name}}!</h3>
-name: <input type="text" ng-model="ctrl.name" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }">
+<h3>Hello {{ name }}!</h3>
+name: <input type="text" ng-model="name" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }">
 
 <script type="application/dart" src="hello_world.dart"></script>
 <script src="packages/browser/dart.js"></script>

diff --git a/example/web/shadow_dom_components.dart b/example/web/shadow_dom_components.dart
@@ -16,16 +16,15 @@ main() {
 
 @Component(
     selector: "my-component",
-    publishAs: "ctrl",
     template: """
-      <div class="custom-component" ng-class="ctrl.color">
+      <div class="custom-component" ng-class="color">
         <span>Shadow [</span>
         <content></content>
         <span>]</span>
-        <a href="#" ng-click="ctrl.on=!ctrl.on"><my-button>
+        <a href="#" ng-click="on=!on"><my-button>
           Toggle</my-button></a>
-        <span ng-if="ctrl.on">off</span>
-        <span ng-if="!ctrl.on">on</span>
+        <span ng-if="on">off</span>
+        <span ng-if="!on">on</span>
       </div>
     """,
     cssUrl: "/css/shadow_dom_components.css")

diff --git a/example/web/todo.dart b/example/web/todo.dart
@@ -53,10 +53,7 @@ class HttpServer implements Server {
   }
 }
 
-
-@Controller(
-    selector: '[todo-controller]',
-    publishAs: 'todo')
+@Injectable()
 class Todo {
   var items = <Item>[];
   Item newItem;
@@ -94,18 +91,12 @@ class Todo {
 
 main() {
   print(window.location.search);
-  var module = new Module()
-      ..bind(Todo)
-      ..bind(PlaybackHttpBackendConfig);
+  var module = new Module()..bind(PlaybackHttpBackendConfig);
 
   // If these is a query in the URL, use the server-backed
   // TodoController.  Otherwise, use the stored-data controller.
   var query = window.location.search;
-  if (query.contains('?')) {
-    module.bind(Server, toImplementation: HttpServer);
-  } else {
-    module.bind(Server, toImplementation: NoOpServer);
-  }
+  module.bind(Server, toImplementation: query.contains('?') ? HttpServer : NoOpServer);
 
   if (query == '?record') {
     print('Using recording HttpBackend');
@@ -119,5 +110,8 @@ main() {
     module.bind(HttpBackend, toImplementation: PlaybackHttpBackend);
   }
 
-  applicationFactory().addModule(module).run();
+  applicationFactory()
+      .addModule(module)
+      .rootContextType(Todo)
+      .run();
 }
diff --git a/example/web/todo.html b/example/web/todo.html
@@ -11,29 +11,29 @@
 
     <div ng-hide="true" class="border well loading">Wait, Dart is loading this awesome app...</div>
 
-    <div todo-controller class="border well" ng-cloak>
+    <div class="border well" ng-cloak>
         <h2>Things To Do ;-)</h2>
 
         <div class="right">
-            <button ng-click="todo.markAllDone()" class="btn btn-small">mark all done</button>
-            <button ng-click="todo.archiveDone()" class="btn btn-small">archive done</button>
+            <button ng-click="markAllDone()" class="btn btn-small">mark all done</button>
+            <button ng-click="archiveDone()" class="btn btn-small">archive done</button>
         </div>
 
-        <p>Remaining <b>{{todo.remaining()}}</b> of <b>{{todo.items.length}}</b> items.</p>
+        <p>Remaining <b>{{ remaining() }}</b> of <b>{{ items.length }}</b> items.</p>
 
 
         <ul class="well unstyled">
-            <li ng-repeat="item in todo.items" ng-class="todo.classFor(item)">
+            <li ng-repeat="item in items" ng-class="classFor(item)">
                 <label class="checkbox">
                     <input type="checkbox" ng-model="item.done"> {{item.text}}
                 </label>
             </li>
         </ul>
 
         <form class="form-inline" onsubmit="return false;">
-            <input type="text" ng-model="todo.newItem.text">
-            <button ng-click="todo.add()" ng-disabled="todo.newItem.isEmpty" class="btn btn-primary">add</button>
-            <button ng-click="todo.newItem.clear()" ng-disabled="todo.newItem.isEmpty" class="btn">clear</button>
+            <input type="text" ng-model="newItem.text">
+            <button ng-click="add()" ng-disabled="newItem.isEmpty" class="btn btn-primary">add</button>
+            <button ng-click="newItem.clear()" ng-disabled="newItem.isEmpty" class="btn">clear</button>
         </form>
     </div>
 </body>