Skip to content

Commit 7d20d5d

Browse files
vicbvicb
committed
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 } }
1 parent 7d7f5e8 commit 7d20d5d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+793
-831
lines changed

‎benchmark/web/tree.dart

+7-10
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,22 @@ import 'package:angular/application_factory.dart';
55
import 'package:angular/change_detection/ast_parser.dart';
66

77
import 'dart:html';
8-
import 'dart:math';
98
import 'dart:js' as js;
109

1110
@Component(
1211
selector: 'tree',
1312
template: '<span> {{ctrl.data.value}}'
14-
'<span ng-if="ctrl.data.right != null"><tree data=ctrl.data.right></span>'
15-
'<span ng-if="ctrl.data.left != null"><tree data=ctrl.data.left></span>'
16-
'</span>',
17-
publishAs: 'ctrl')
13+
'<span ng-if="data.right != null"><tree data=data.right></span>'
14+
'<span ng-if="data.left != null"><tree data=data.left></span>'
15+
'</span>')
1816
class TreeComponent {
1917
@NgOneWay('data')
2018
var data;
2119
}
2220

2321
@Component(
2422
selector: 'tree-url',
25-
templateUrl: 'tree-tmpl.html',
26-
publishAs: 'ctrl')
23+
templateUrl: 'tree-tmpl.html')
2724
class TreeUrlComponent {
2825
@NgOneWay('data')
2926
var data;
@@ -189,19 +186,19 @@ class FreeTreeClass {
189186
s.text = " $v";
190187
}
191188
});
192-
189+
193190
scope.watchAST(treeRightNotNullAST, (v, _) {
194191
if (v != true) return;
195192
s.append(new SpanElement()
196193
..append(new FreeTreeClass(scope, treeRightAST).element()));
197194
});
198-
195+
199196
scope.watchAST(treeLeftNotNullAST, (v, _) {
200197
if (v != true) return;
201198
s.append(new SpanElement()
202199
..append(new FreeTreeClass(scope, treeLeftAST).element()));
203200
});
204-
201+
205202
return elt;
206203
}
207204
}

‎example/web/animation.dart

+2-4
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ part 'animation/visibility_demo.dart';
99
part 'animation/stress_demo.dart';
1010
part 'animation/css_demo.dart';
1111

12-
@Controller(
13-
selector: '[animation-demo]',
14-
publishAs: 'demo')
12+
@Injectable()
1513
class AnimationDemo {
1614
final pages = ["About", "ng-repeat", "Visibility", "Css", "Stress Test"];
1715
var currentPage = "About";
@@ -24,11 +22,11 @@ class AnimationDemoModule extends Module {
2422
bind(VisibilityDemo);
2523
bind(StressDemo);
2624
bind(CssDemo);
27-
bind(AnimationDemo);
2825
}
2926
}
3027
main() {
3128
applicationFactory()
3229
.addModule(new AnimationDemoModule())
30+
.rootContextType(AnimationDemo)
3331
.run();
3432
}

‎example/web/animation.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
</head>
77
<body class="ng-cloak" ng-app animation-demo>
88
<nav>
9-
<button ng-repeat="page in demo.pages"
10-
ng-click="demo.currentPage = page"
11-
ng-class="{'current': demo.currentPage == page}">
9+
<button ng-repeat="page in pages"
10+
ng-click="currentPage = page"
11+
ng-class="{'current': currentPage == page}">
1212
{{page}}
1313
</button>
1414
</nav>
15-
<div class="content" ng-switch="demo.currentPage">
15+
<div class="content" ng-switch="currentPage">
1616
<div class="demo" ng-switch-default>
17+
1718
<h2>About</h2>
1819
<p>The NgAnimate module is a port with modifications of the original
1920
AngularJS animation module. The default implementation does nothing.
@@ -22,6 +23,7 @@ <h2>About</h2>
2223
added it allows you define and run css animations on your elements with
2324
pure CSS.</p>
2425
<p>Check out the demos above.</p>
26+
2527
</div>
2628
<div class="demo" ng-switch-when="ng-repeat">
2729
<h2>ng-repeat Demo</h2>

‎example/web/animation/css_demo.dart

+9-10
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,24 @@ part of animation;
44
selector: 'css-demo',
55
template: '''
66
<div class="css-demo">
7-
<button ng-click="ctrl.stateA = !ctrl.stateA"
8-
ng-class="{'active': ctrl.stateA}">
7+
<button ng-click="stateA = !stateA"
8+
ng-class="{'active': stateA}">
99
Toggle A</button>
10-
<button ng-click="ctrl.stateB = !ctrl.stateB"
11-
ng-class="{'active': ctrl.stateB}">
10+
<button ng-click="stateB = !stateB"
11+
ng-class="{'active': stateB}">
1212
Toggle B</button>
13-
<button ng-click="ctrl.stateC = !ctrl.stateC"
14-
ng-class="{'active': ctrl.stateC}">
13+
<button ng-click="stateC = !stateC"
14+
ng-class="{'active': stateC}">
1515
Toggle C</button>
1616
<div class="box-container">
1717
<div class="css-box" ng-class="{
18-
'a': ctrl.stateA,
19-
'b': ctrl.stateB,
20-
'c': ctrl.stateC}">BOX</div>
18+
'a': stateA,
19+
'b': stateB,
20+
'c': stateC}">BOX</div>
2121
</div>
2222
</div>
2323
</div>
2424
''',
25-
publishAs: 'ctrl',
2625
applyAuthorStyles: true)
2726
class CssDemo {
2827
bool stateA = false;

‎example/web/animation/repeat_demo.dart

+4-6
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,17 @@ part of animation;
55
useShadowDom: false,
66
template: '''
77
<div class="repeat-demo">
8-
<button ng-click="ctrl.addItem()">Add Thing</button>
9-
<button ng-click="ctrl.removeItem()">Remove Thing
10-
</button>
8+
<button ng-click="addItem()">Add Thing</button>
9+
<button ng-click="removeItem()">Remove Thing</button>
1110
<ul>
12-
<li ng-repeat="outer in ctrl.items">
11+
<li ng-repeat="outer in items">
1312
<ul>
14-
<li ng-repeat="inner in ctrl.items">{{inner}}</li>
13+
<li ng-repeat="inner in items">{{inner}}</li>
1514
</ul>
1615
</li>
1716
</ul>
1817
</div>
1918
''',
20-
publishAs: 'ctrl',
2119
applyAuthorStyles: true)
2220
class RepeatDemo {
2321
var thing = 0;

‎example/web/animation/stress_demo.dart

+2-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,13 @@ part of animation;
44
selector: 'stress-demo',
55
template: '''
66
<div class="stress-demo">
7-
<button ng-click="ctrl.visible = !ctrl.visible">
7+
<button ng-click="visible = !visible">
88
Toggle Visibility</button>
99
<div>
10-
<div class="stress-box" ng-repeat="number in ctrl.numbers"></div>
10+
<div class="stress-box" ng-repeat="number in numbers"></div>
1111
</div>
1212
</div>
1313
''',
14-
publishAs: 'ctrl',
1514
applyAuthorStyles: true)
1615
class StressDemo {
1716
bool _visible = true;

‎example/web/animation/visibility_demo.dart

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,18 @@ part of animation;
44
selector: 'visibility-demo',
55
template: '''
66
<div class="visibility-demo">
7-
<button ng-click="ctrl.visible = !ctrl.visible">Toggle Visibility</button>
8-
<div class="visible-if" ng-if="ctrl.visible">
7+
<button ng-click="visible = !visible">Toggle Visibility</button>
8+
<div class="visible-if" ng-if="visible">
99
<p>Hello World. ng-if will create and destroy
1010
dom elements each time you toggle me.</p>
1111
</div>
12-
<div class="visible-hide" ng-hide="ctrl.visible">
12+
<div class="visible-hide" ng-hide="visible">
1313
<p>Hello World. ng-hide will add and remove
1414
the .ng-hide class from me to show and
1515
hide this view of text.</p>
1616
</div>
1717
</div>
1818
''',
19-
publishAs: 'ctrl',
2019
useShadowDom: false)
2120
class VisibilityDemo {
2221
bool visible = false;

‎example/web/bouncing_balls.dart

+9-9
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,18 @@ class BallModel {
2626

2727
}
2828

29-
@Controller(
30-
selector: '[bounce-controller]',
31-
publishAs: 'bounce')
32-
class BounceController {
29+
@Injectable()
30+
class BounceController implements ScopeAware {
31+
Scope scope;
3332
var lastTime = window.performance.now();
3433
var run = false;
3534
var fps = 0;
3635
var digestTime = 0;
3736
var currentDigestTime = 0;
3837
var balls = [];
39-
final Scope scope;
4038
var ballClassName = 'ball';
4139

42-
BounceController(this.scope) {
40+
BounceController() {
4341
changeCount(100);
4442
if (run) tick();
4543
}
@@ -82,7 +80,7 @@ class BounceController {
8280
var delay = now - lastTime;
8381

8482
fps = (1000/delay).round();
85-
for(var i=0, ii=balls.length; i<ii; i++) {
83+
for(var i = 0; i < balls.length; i++) {
8684
var b = balls[i];
8785
b.x += delay * b.velX;
8886
b.y += delay * b.velY;
@@ -124,11 +122,13 @@ class BallPosition {
124122

125123
class MyModule extends Module {
126124
MyModule() {
127-
bind(BounceController);
128125
bind(BallPosition);
129126
}
130127
}
131128

132129
main() {
133-
applicationFactory().addModule(new MyModule()).run();
130+
applicationFactory()
131+
.rootContextType(BounceController)
132+
.addModule(new MyModule())
133+
.run();
134134
}

‎example/web/bouncing_balls.html

+14-14
Original file line numberDiff line numberDiff line change
@@ -39,30 +39,30 @@
3939
<body ng-app>
4040
<div bounce-controller>
4141
<div class="balls">
42-
<div ng-repeat="ball in bounce.balls"
43-
class="{{bounce.ballClassName}}"
42+
<div ng-repeat="ball in balls"
43+
class="{{ ballClassName }}"
4444
ball-position="ball"></div>
4545
</div>
4646

4747
<div>
4848
<div class="fps-bar">
49-
<div class="fps" ng-style-width="bounce.fps*4 + 'px'"></div>
49+
<div class="fps" ng-style-width="fps * 4 + 'px'"></div>
5050
</div>
5151
</div>
5252

53-
{{bounce.fps}} fps. ({{bounce.balls.length}} balls) [{{1000/bounce.fps}} ms] <br>
54-
Digest: {{bounce.digestTime}} ms<br>
55-
<a href ng-click="bounce.changeCount(1)">+1</a>
56-
<a href ng-click="bounce.changeCount(10)">+10</a>
57-
<a href ng-click="bounce.changeCount(100)">+100</a>
53+
{{ fps }} fps. ({{ balls.length }} balls) [{{ 1000 / fps }} ms] <br>
54+
Digest: {{ digestTime }} ms<br>
55+
<a href ng-click="changeCount(1)">+1</a>
56+
<a href ng-click="changeCount(10)">+10</a>
57+
<a href ng-click="changeCount(100)">+100</a>
5858
<br>
59-
<a href ng-click="bounce.changeCount(-1)">-1</a>
60-
<a href ng-click="bounce.changeCount(-10)">-10</a>
61-
<a href ng-click="bounce.changeCount(-100)">-100</a>
59+
<a href ng-click="changeCount(-1)">-1</a>
60+
<a href ng-click="changeCount(-10)">-10</a>
61+
<a href ng-click="changeCount(-100)">-100</a>
6262
<br>
63-
<a href ng-click="bounce.playPause()">&#x25B6;&#10073;&#10073;</a> <br>
64-
<a href ng-click="bounce.toggleCSS()">Toggle CSS</a><br>
65-
<a href ng-click="bounce.timeDigest()">noop</a><br>
63+
<a href ng-click="playPause()">&#x25B6;&#10073;&#10073;</a> <br>
64+
<a href ng-click="toggleCSS()">Toggle CSS</a><br>
65+
<a href ng-click="timeDigest()">noop</a><br>
6666
</div>
6767

6868
<script type="application/dart" src="bouncing_balls.dart"></script>

‎example/web/hello_world.dart

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import 'package:angular/angular.dart';
22
import 'package:angular/application_factory.dart';
33

4-
@Controller(
5-
selector: '[hello-world-controller]',
6-
publishAs: 'ctrl')
4+
@Injectable()
75
class HelloWorld {
86
String name = "world";
97
String color = "#aaaaaa";
108
}
119

1210
main() {
1311
applicationFactory()
14-
.addModule(new Module()..bind(HelloWorld))
12+
.rootContextType(HelloWorld)
1513
.run();
1614
}

‎example/web/hello_world.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
</head>
66
<body hello-world-controller>
77

8-
<h3 ng-style="{color:ctrl.color}">Hello {{ctrl.name}}!</h3>
9-
Name: <input type="text" ng-model="ctrl.name" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }" />
10-
Color: <input type="color" ng-model="ctrl.color"/>
8+
<h3 ng-style="{color:color}">Hello {{name}}!</h3>
9+
Name: <input type="text" ng-model="name" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }" />
10+
Color: <input type="color" ng-model="color"/>
1111

1212
<script type="application/dart" src="hello_world.dart"></script>
1313
<script src="packages/browser/dart.js"></script>

‎example/web/shadow_dom_components.dart

+4-5
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,15 @@ main() {
1616

1717
@Component(
1818
selector: "my-component",
19-
publishAs: "ctrl",
2019
template: """
21-
<div class="custom-component" ng-class="ctrl.color">
20+
<div class="custom-component" ng-class="color">
2221
<span>Shadow [</span>
2322
<content></content>
2423
<span>]</span>
25-
<a href="#" ng-click="ctrl.on=!ctrl.on"><my-button>
24+
<a href="#" ng-click="on=!on"><my-button>
2625
Toggle</my-button></a>
27-
<span ng-if="ctrl.on">off</span>
28-
<span ng-if="!ctrl.on">on</span>
26+
<span ng-if="on">off</span>
27+
<span ng-if="!on">on</span>
2928
</div>
3029
""",
3130
cssUrl: "/css/shadow_dom_components.css")

‎example/web/todo.dart

+7-13
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,7 @@ class HttpServer implements Server {
5353
}
5454
}
5555

56-
57-
@Controller(
58-
selector: '[todo-controller]',
59-
publishAs: 'todo')
56+
@Injectable()
6057
class Todo {
6158
var items = <Item>[];
6259
Item newItem;
@@ -94,18 +91,12 @@ class Todo {
9491

9592
main() {
9693
print(window.location.search);
97-
var module = new Module()
98-
..bind(Todo)
99-
..bind(PlaybackHttpBackendConfig);
94+
var module = new Module()..bind(PlaybackHttpBackendConfig);
10095

10196
// If these is a query in the URL, use the server-backed
10297
// TodoController. Otherwise, use the stored-data controller.
10398
var query = window.location.search;
104-
if (query.contains('?')) {
105-
module.bind(Server, toImplementation: HttpServer);
106-
} else {
107-
module.bind(Server, toImplementation: NoOpServer);
108-
}
99+
module.bind(Server, toImplementation: query.contains('?') ? HttpServer : NoOpServer);
109100

110101
if (query == '?record') {
111102
print('Using recording HttpBackend');
@@ -119,5 +110,8 @@ main() {
119110
module.bind(HttpBackend, toImplementation: PlaybackHttpBackend);
120111
}
121112

122-
applicationFactory().addModule(module).run();
113+
applicationFactory()
114+
.addModule(module)
115+
.rootContextType(Todo)
116+
.run();
123117
}

0 commit comments

Comments
 (0)