This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

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
  • Loading branch information...
rkirov committed Aug 27, 2014
1 parent fb7a3aa commit 5f8e27659ffb0140e0c153f8cecd627df273bfd2
View
@@ -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"
View
@@ -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
View
@@ -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();
}
@@ -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>
@@ -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();
}
@@ -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>
@@ -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;
+}
@@ -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>
Oops, something went wrong.

0 comments on commit 5f8e276

Please sign in to comment.