Skip to content

Commit 3501769

Browse files
vicbvicb
committed
refactor: Drop the Controller directive
closes dart-archive#919 closes dart-archive#917 It is possible to define the context of the root scope with: applicationFactory() ..rootContextType(RootContext) ..run(); The RootContext need not be annotated with a directive.
1 parent 7a340ac commit 3501769

Some content is hidden

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

55 files changed

+655
-856
lines changed

‎example/web/animation.dart

+1-4
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,6 @@ 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')
1512
class AnimationDemo {
1613
final pages = ["About", "ng-repeat", "Visibility", "Css", "Stress Test"];
1714
var currentPage = "About";
@@ -24,11 +21,11 @@ class AnimationDemoModule extends Module {
2421
bind(VisibilityDemo);
2522
bind(StressDemo);
2623
bind(CssDemo);
27-
bind(AnimationDemo);
2824
}
2925
}
3026
main() {
3127
applicationFactory()
3228
.addModule(new AnimationDemoModule())
29+
.rootContextType(AnimationDemo)
3330
.run();
3431
}

‎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
@@ -4,19 +4,17 @@ part of animation;
44
selector: 'repeat-demo',
55
template: '''
66
<div class="repeat-demo">
7-
<button ng-click="ctrl.addItem()">Add Thing</button>
8-
<button ng-click="ctrl.removeItem()">Remove Thing
9-
</button>
7+
<button ng-click="addItem()">Add Thing</button>
8+
<button ng-click="removeItem()">Remove Thing</button>
109
<ul>
11-
<li ng-repeat="outer in ctrl.items">
10+
<li ng-repeat="outer in items">
1211
<ul>
13-
<li ng-repeat="inner in ctrl.items">{{inner}}</li>
12+
<li ng-repeat="inner in items">{{inner}}</li>
1413
</ul>
1514
</li>
1615
</ul>
1716
</div>
1817
''',
19-
publishAs: 'ctrl',
2018
applyAuthorStyles: true)
2119
class RepeatDemo {
2220
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
applyAuthorStyles: true)
2120
class VisibilityDemo {
2221
bool visible = false;

‎example/web/bouncing_balls.dart

+10-11
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,16 @@ class BallModel {
2626

2727
}
2828

29-
@Controller(
30-
selector: '[bounce-controller]',
31-
publishAs: 'bounce')
3229
class BounceController {
3330
var lastTime = window.performance.now();
3431
var run = false;
3532
var fps = 0;
3633
var digestTime = 0;
3734
var currentDigestTime = 0;
3835
var balls = [];
39-
final Scope scope;
4036
var ballClassName = 'ball';
4137

42-
BounceController(this.scope) {
38+
BounceController() {
4339
changeCount(100);
4440
if (run) tick();
4541
}
@@ -72,17 +68,18 @@ class BounceController {
7268
void timeDigest() {
7369
var start = window.performance.now();
7470
digestTime = currentDigestTime;
75-
scope.rootScope.domRead(() {
76-
currentDigestTime = window.performance.now() - start;
77-
});
71+
// todo(vicb)
72+
// scope.rootScope.domRead(() {
73+
// currentDigestTime = window.performance.now() - start;
74+
// });
7875
}
7976

8077
void tick() {
8178
var now = window.performance.now();
8279
var delay = now - lastTime;
8380

8481
fps = (1000/delay).round();
85-
for(var i=0, ii=balls.length; i<ii; i++) {
82+
for(var i = 0; i < balls.length; i++) {
8683
var b = balls[i];
8784
b.x += delay * b.velX;
8885
b.y += delay * b.velY;
@@ -124,11 +121,13 @@ class BallPosition {
124121

125122
class MyModule extends Module {
126123
MyModule() {
127-
bind(BounceController);
128124
bind(BallPosition);
129125
}
130126
}
131127

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

‎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

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

4-
@Controller(
5-
selector: '[hello-world-controller]',
6-
publishAs: 'ctrl')
74
class HelloWorld {
85
String name = "world";
96
}
107

118
main() {
129
applicationFactory()
13-
.addModule(new Module()..bind(HelloWorld))
10+
.rootContextType(HelloWorld)
1411
.run();
1512
}

‎example/web/hello_world.html

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

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

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

‎example/web/todo.dart

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

56-
57-
@Controller(
58-
selector: '[todo-controller]',
59-
publishAs: 'todo')
6056
class Todo {
6157
var items = <Item>[];
6258
Item newItem;
@@ -94,18 +90,12 @@ class Todo {
9490

9591
main() {
9692
print(window.location.search);
97-
var module = new Module()
98-
..bind(Todo)
99-
..bind(PlaybackHttpBackendConfig);
93+
var module = new Module()..bind(PlaybackHttpBackendConfig);
10094

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

110100
if (query == '?record') {
111101
print('Using recording HttpBackend');
@@ -119,5 +109,8 @@ main() {
119109
module.bind(HttpBackend, toImplementation: PlaybackHttpBackend);
120110
}
121111

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

‎example/web/todo.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,29 @@
1111

1212
<div ng-hide="true" class="border well loading">Wait, Dart is loading this awesome app...</div>
1313

14-
<div todo-controller class="border well" ng-cloak>
14+
<div class="border well" ng-cloak>
1515
<h2>Things To Do ;-)</h2>
1616

1717
<div class="right">
18-
<button ng-click="todo.markAllDone()" class="btn btn-small">mark all done</button>
19-
<button ng-click="todo.archiveDone()" class="btn btn-small">archive done</button>
18+
<button ng-click="markAllDone()" class="btn btn-small">mark all done</button>
19+
<button ng-click="archiveDone()" class="btn btn-small">archive done</button>
2020
</div>
2121

22-
<p>Remaining <b>{{todo.remaining()}}</b> of <b>{{todo.items.length}}</b> items.</p>
22+
<p>Remaining <b>{{ remaining() }}</b> of <b>{{ items.length }}</b> items.</p>
2323

2424

2525
<ul class="well unstyled">
26-
<li ng-repeat="item in todo.items" ng-class="todo.classFor(item)">
26+
<li ng-repeat="item in items" ng-class="classFor(item)">
2727
<label class="checkbox">
2828
<input type="checkbox" ng-model="item.done"> {{item.text}}
2929
</label>
3030
</li>
3131
</ul>
3232

3333
<form class="form-inline" onsubmit="return false;">
34-
<input type="text" ng-model="todo.newItem.text">
35-
<button ng-click="todo.add()" ng-disabled="todo.newItem.isEmpty" class="btn btn-primary">add</button>
36-
<button ng-click="todo.newItem.clear()" ng-disabled="todo.newItem.isEmpty" class="btn">clear</button>
34+
<input type="text" ng-model="newItem.text">
35+
<button ng-click="add()" ng-disabled="newItem.isEmpty" class="btn btn-primary">add</button>
36+
<button ng-click="newItem.clear()" ng-disabled="newItem.isEmpty" class="btn">clear</button>
3737
</form>
3838
</div>
3939
</body>

‎lib/application.dart

+6-7
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,9 @@
88
* import 'package:angular/angular.dart';
99
* import 'package:angular/application_factory.dart';
1010
*
11-
* class MyModule extends Module {
12-
* MyModule() {
13-
* bind(HelloWorldController);
14-
* }
15-
* }
16-
*
1711
* main() {
1812
* applicationFactory()
19-
* .addModule(new MyModule())
13+
* .rootContextType(HelloWorldController)
2014
* .run();
2115
* }
2216
*
@@ -159,6 +153,11 @@ abstract class Application {
159153
return this;
160154
}
161155

156+
Application rootContextType(Type rootContext) {
157+
modules.add(new Module()..bind(Object, toImplementation: rootContext));
158+
return this;
159+
}
160+
162161
Injector run() {
163162
publishToJavaScript();
164163
return zone.run(() {

0 commit comments

Comments
 (0)