Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

[WIP] refactor: Drop the Controller directive #1040

Closed
wants to merge 3 commits into from
Closed

[WIP] refactor: Drop the Controller directive #1040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6a0f77
refactor: Drop the Controller directive
vicb May 13, 2014
8de6b79
feat: Removing implicit map dereference in expressions
vicb May 16, 2014
0775e56
tofix: error with runZoned
vicb May 28, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 0 additions & 34 deletions benchmark/watch_group_perf.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ var _dynamicFieldGetterFactory = new DynamicFieldGetterFactory();
main() {
_fieldRead();
_fieldReadGetter();
_mapRead();
_methodInvoke0();
_methodInvoke1();
_function2();
Expand Down Expand Up @@ -107,39 +106,6 @@ _fieldReadGetter() {
time('fieldReadGetter', () => watchGrp.detectChanges());
}

_mapRead() {
var map = {
'a': 0, 'b': 1, 'c': 2, 'd': 3, 'e': 4,
'f': 0, 'g': 1, 'h': 2, 'i': 3, 'j': 4,
'k': 0, 'l': 1, 'm': 2, 'n': 3, 'o': 4,
'p': 0, 'q': 1, 'r': 2, 's': 3, 't': 4};
var watchGrp = new RootWatchGroup(_dynamicFieldGetterFactory,
new DirtyCheckingChangeDetector(_dynamicFieldGetterFactory), map)
..watch(_parse('a'), _reactionFn)
..watch(_parse('b'), _reactionFn)
..watch(_parse('c'), _reactionFn)
..watch(_parse('d'), _reactionFn)
..watch(_parse('e'), _reactionFn)
..watch(_parse('f'), _reactionFn)
..watch(_parse('g'), _reactionFn)
..watch(_parse('h'), _reactionFn)
..watch(_parse('i'), _reactionFn)
..watch(_parse('j'), _reactionFn)
..watch(_parse('k'), _reactionFn)
..watch(_parse('l'), _reactionFn)
..watch(_parse('m'), _reactionFn)
..watch(_parse('n'), _reactionFn)
..watch(_parse('o'), _reactionFn)
..watch(_parse('p'), _reactionFn)
..watch(_parse('q'), _reactionFn)
..watch(_parse('r'), _reactionFn)
..watch(_parse('s'), _reactionFn)
..watch(_parse('t'), _reactionFn);

print('Watch: ${watchGrp.fieldCost}; eval: ${watchGrp.evalCost}');
time('mapRead', () => watchGrp.detectChanges());
}

_methodInvoke0() {
var context = new _Obj();
context.a = new _Obj();
Expand Down
6 changes: 2 additions & 4 deletions example/web/animation.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -24,11 +22,11 @@ class AnimationDemoModule extends Module {
bind(VisibilityDemo);
bind(StressDemo);
bind(CssDemo);
bind(AnimationDemo);
}
}
main() {
applicationFactory()
.addModule(new AnimationDemoModule())
.rootContextType(AnimationDemo)
.run();
}
10 changes: 6 additions & 4 deletions example/web/animation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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>
Expand Down
19 changes: 9 additions & 10 deletions example/web/animation/css_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 4 additions & 6 deletions example/web/animation/repeat_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,17 @@ part of animation;
selector: 'repeat-demo',
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;
Expand Down
5 changes: 2 additions & 3 deletions example/web/animation/stress_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 3 additions & 4 deletions example/web/animation/visibility_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
applyAuthorStyles: true)
class VisibilityDemo {
bool visible = false;
Expand Down
18 changes: 9 additions & 9 deletions example/web/bouncing_balls.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Scope could not be injected in the root "controller". It would cause a circular dependency (Scope.context = controller).
I should work on a fix.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed by implementing ScopeAware

}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
28 changes: 14 additions & 14 deletions example/web/bouncing_balls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 2 additions & 4 deletions example/web/hello_world.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
4 changes: 2 additions & 2 deletions example/web/hello_world.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 4 additions & 5 deletions example/web/shadow_dom_components.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down
20 changes: 7 additions & 13 deletions example/web/todo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,7 @@ class HttpServer implements Server {
}
}


@Controller(
selector: '[todo-controller]',
publishAs: 'todo')
@Injectable()
class Todo {
var items = <Item>[];
Item newItem;
Expand Down Expand Up @@ -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');
Expand All @@ -119,5 +110,8 @@ main() {
module.bind(HttpBackend, toImplementation: PlaybackHttpBackend);
}

applicationFactory().addModule(module).run();
applicationFactory()
.addModule(module)
.rootContextType(Todo)
.run();
}
Loading