From 0f5ea46590ca050dc88c7842c0bee3cd9527c014 Mon Sep 17 00:00:00 2001 From: Kathy Walrath Date: Tue, 9 Feb 2016 13:50:08 -0800 Subject: [PATCH] samples(dart pipes): update to b3 and latest TS UI Based on #821 by tomplusplus. Closes #827. --- .../pipes/dart/lib/app_component.dart | 21 +++++++++++ .../pipes/dart/lib/app_component.html | 36 +++++++++++++++++++ .../pipes/dart/lib/chained_pipes.dart | 22 ------------ .../dart/lib/exponential_strength_pipe.dart | 4 +-- .../pipes/dart/lib/fetch_json_pipe.dart | 4 +-- ...dart => hero_async_message_component.dart} | 11 ++---- .../pipes/dart/lib/hero_birthday.dart | 21 ----------- .../dart/lib/hero_birthday1_component.dart | 10 ++++++ .../dart/lib/hero_birthday2_component.dart | 19 ++++++++++ .../pipes/dart/lib/hero_list_component.dart | 19 ++++++++++ .../_examples/pipes/dart/lib/heroes_list.dart | 12 ------- .../dart/lib/power_boost_calculator.dart | 20 +++++------ .../pipes/dart/lib/power_booster.dart | 13 +++---- public/docs/_examples/pipes/dart/pubspec.yaml | 4 ++- .../docs/_examples/pipes/dart/web/heroes.json | 19 +++------- .../docs/_examples/pipes/dart/web/index.html | 23 ++++++------ .../docs/_examples/pipes/dart/web/main.dart | 14 ++------ .../docs/_examples/pipes/dart/web/style.css | 0 18 files changed, 148 insertions(+), 124 deletions(-) create mode 100644 public/docs/_examples/pipes/dart/lib/app_component.dart create mode 100644 public/docs/_examples/pipes/dart/lib/app_component.html delete mode 100644 public/docs/_examples/pipes/dart/lib/chained_pipes.dart rename public/docs/_examples/pipes/dart/lib/{my_hero.dart => hero_async_message_component.dart} (56%) delete mode 100644 public/docs/_examples/pipes/dart/lib/hero_birthday.dart create mode 100644 public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart create mode 100644 public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart create mode 100644 public/docs/_examples/pipes/dart/lib/hero_list_component.dart delete mode 100644 public/docs/_examples/pipes/dart/lib/heroes_list.dart delete mode 100644 public/docs/_examples/pipes/dart/web/style.css diff --git a/public/docs/_examples/pipes/dart/lib/app_component.dart b/public/docs/_examples/pipes/dart/lib/app_component.dart new file mode 100644 index 0000000000..1edd92c0f4 --- /dev/null +++ b/public/docs/_examples/pipes/dart/lib/app_component.dart @@ -0,0 +1,21 @@ +import 'package:angular2/angular2.dart'; + +import 'hero_async_message_component.dart'; +import 'hero_birthday2_component.dart'; +import 'hero_list_component.dart'; +import 'power_booster.dart'; +import 'power_boost_calculator.dart'; + +@Component( + selector: 'my-app', + templateUrl: 'app_component.html', + directives: const [ + HeroAsyncMessageComponent, + HeroBirthday, + HeroListComponent, + PowerBooster, + PowerBoostCalculator + ]) +class AppComponent { + DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 +} diff --git a/public/docs/_examples/pipes/dart/lib/app_component.html b/public/docs/_examples/pipes/dart/lib/app_component.html new file mode 100644 index 0000000000..feed0f1908 --- /dev/null +++ b/public/docs/_examples/pipes/dart/lib/app_component.html @@ -0,0 +1,36 @@ +
+ + + +
+ + +
+

The hero's birthday is {{ birthday | date }}

+ +

The hero's birthday is {{ birthday | date:"MM/dd/yy" }}

+ +
+

Hero Birthday v.2

+loading... +
+ + +

+ The chained hero's birthday is + {{ birthday | date | uppercase}} +

+ +

+ The chained hero's birthday is + {{ birthday | date:'fullDate' | uppercase}} +

+

+ The chained hero's birthday is + {{ ( birthday | date:'fullDate' ) | uppercase}} +

+
+loading... + +
+loading .. diff --git a/public/docs/_examples/pipes/dart/lib/chained_pipes.dart b/public/docs/_examples/pipes/dart/lib/chained_pipes.dart deleted file mode 100644 index 1142625541..0000000000 --- a/public/docs/_examples/pipes/dart/lib/chained_pipes.dart +++ /dev/null @@ -1,22 +0,0 @@ -library pipe_examples.chained_pipes; - -import 'package:angular2/angular2.dart'; - -@Component(selector: 'chained-pipes') -@View( - template: ''' -

- The chained hero's birthday is - {{ birthday | date | uppercase}} -

-The chained hero's birthday is - {{ birthday | date:'fullDate' }} -

-

- The chained hero's birthday is - {{ ( birthday | date:'fullDate' ) | uppercase}} -

-''') -class ChainedPipes { - DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 -} diff --git a/public/docs/_examples/pipes/dart/lib/exponential_strength_pipe.dart b/public/docs/_examples/pipes/dart/lib/exponential_strength_pipe.dart index d503d46038..b84297950c 100644 --- a/public/docs/_examples/pipes/dart/lib/exponential_strength_pipe.dart +++ b/public/docs/_examples/pipes/dart/lib/exponential_strength_pipe.dart @@ -1,5 +1,3 @@ -library pipes_examples.exponential_strength_pipe; - import 'dart:math' as math; import 'package:angular2/angular2.dart'; @@ -17,7 +15,7 @@ import 'package:angular2/angular2.dart'; @Pipe(name: 'exponentialStrength') @Injectable() -class ExponentialStrengthPipe { +class ExponentialStrengthPipe extends PipeTransform { transform(dynamic value, [List args]) { var v = int.parse(value.toString(), onError: (source) => 0); var p = args.isEmpty diff --git a/public/docs/_examples/pipes/dart/lib/fetch_json_pipe.dart b/public/docs/_examples/pipes/dart/lib/fetch_json_pipe.dart index 3eb965f198..e07f58ff53 100644 --- a/public/docs/_examples/pipes/dart/lib/fetch_json_pipe.dart +++ b/public/docs/_examples/pipes/dart/lib/fetch_json_pipe.dart @@ -1,5 +1,3 @@ -library pipe_examples.fetch_json_pipe; - import 'dart:html'; import 'dart:async'; import 'dart:convert'; @@ -8,7 +6,7 @@ import 'package:angular2/angular2.dart'; @Pipe(name: 'fetch', pure: false) @Injectable() -class FetchJsonPipe { +class FetchJsonPipe extends PipeTransform { dynamic _fetchedValue; Future _fetchPromise; transform(dynamic value, [List args]) { diff --git a/public/docs/_examples/pipes/dart/lib/my_hero.dart b/public/docs/_examples/pipes/dart/lib/hero_async_message_component.dart similarity index 56% rename from public/docs/_examples/pipes/dart/lib/my_hero.dart rename to public/docs/_examples/pipes/dart/lib/hero_async_message_component.dart index 01e8719fc7..52d1851a86 100644 --- a/public/docs/_examples/pipes/dart/lib/my_hero.dart +++ b/public/docs/_examples/pipes/dart/lib/hero_async_message_component.dart @@ -1,15 +1,10 @@ -library pipe_examples.my_hero; - import 'dart:async'; import 'package:angular2/angular2.dart'; -@Component(selector: 'my-hero') -@View( - template: ''' -

Message: {{delayedMessage | async}}

-''') -class MyHero { +@Component( + selector: 'hero-message', template: 'Message: {{delayedMessage | async}}') +class HeroAsyncMessageComponent { Future delayedMessage = new Future.delayed(new Duration(milliseconds: 500), () { return 'You are my Hero!'; diff --git a/public/docs/_examples/pipes/dart/lib/hero_birthday.dart b/public/docs/_examples/pipes/dart/lib/hero_birthday.dart deleted file mode 100644 index ca140cf728..0000000000 --- a/public/docs/_examples/pipes/dart/lib/hero_birthday.dart +++ /dev/null @@ -1,21 +0,0 @@ -library pipe_examples.hero_birthday; - -import 'package:angular2/angular2.dart'; - -@Component(selector: 'hero-birthday') -@View( - template: ''' -

The hero's birthday is {{ birthday | date:format }}

- -''') -class HeroBirthday { - DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 - String format = 'shortDate'; - String nextFormat = 'fullDate'; - - toggleFormat() { - var next = this.format; - format = this.nextFormat; - nextFormat = next; - } -} diff --git a/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart b/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart new file mode 100644 index 0000000000..4b8f3a33f2 --- /dev/null +++ b/public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart @@ -0,0 +1,10 @@ +import 'package:angular2/angular2.dart'; + +@Component( + selector: 'hero-birthday', + template: ''' +

The hero's birthday is {{ birthday | date }}

+ ''') +class HeroBirthday { + DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 +} diff --git a/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart b/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart new file mode 100644 index 0000000000..032888080e --- /dev/null +++ b/public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart @@ -0,0 +1,19 @@ +import 'package:angular2/angular2.dart'; + +@Component( + selector: 'hero-birthday', + template: ''' +

The hero's birthday is {{ birthday | date:format }}

+ + ''') +class HeroBirthday { + DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988 + + bool toggle = true; + + get format => toggle ? 'shortDate' : 'fullDate'; + + void toggleFormat() { + toggle = !toggle; + } +} diff --git a/public/docs/_examples/pipes/dart/lib/hero_list_component.dart b/public/docs/_examples/pipes/dart/lib/hero_list_component.dart new file mode 100644 index 0000000000..50ae1a5bf1 --- /dev/null +++ b/public/docs/_examples/pipes/dart/lib/hero_list_component.dart @@ -0,0 +1,19 @@ +import 'package:angular2/angular2.dart'; + +import 'fetch_json_pipe.dart'; + +@Component( + selector: 'hero-list', + template: ''' +

Heroes from JSON File

+ +
+ {{hero['name']}} +
+ +

Heroes as JSON: + {{'heroes.json' | fetch | json}} +

+''', + pipes: const [FetchJsonPipe]) +class HeroListComponent {} diff --git a/public/docs/_examples/pipes/dart/lib/heroes_list.dart b/public/docs/_examples/pipes/dart/lib/heroes_list.dart deleted file mode 100644 index 8480818825..0000000000 --- a/public/docs/_examples/pipes/dart/lib/heroes_list.dart +++ /dev/null @@ -1,12 +0,0 @@ -library pipe_examples.heroes_list; - -import 'package:angular2/angular2.dart'; -import 'package:pipe_examples/fetch_json_pipe.dart'; - -@Component(selector: 'heroes-list') -@View( - template: ''' -

Heroes: {{'heroes.json' | fetch | json}}

-''', - pipes: const [FetchJsonPipe]) -class HeroesList {} diff --git a/public/docs/_examples/pipes/dart/lib/power_boost_calculator.dart b/public/docs/_examples/pipes/dart/lib/power_boost_calculator.dart index 05a4745516..1d7f9558cd 100644 --- a/public/docs/_examples/pipes/dart/lib/power_boost_calculator.dart +++ b/public/docs/_examples/pipes/dart/lib/power_boost_calculator.dart @@ -1,21 +1,21 @@ -library pipe_examples.power_boost_calculator; - import 'package:angular2/angular2.dart'; -import 'package:pipe_examples/exponential_strength_pipe.dart'; -@Component(selector: 'power-boost-calculator') -@View( +import 'exponential_strength_pipe.dart'; + +@Component( + selector: 'power-boost-calculator', template: '''

Power Boost Calculator

-
Normal power:
-
Boost factor:
+
Normal power:
+
Boost factor:

Super Hero Power: {{power | exponentialStrength: factor}}

''', pipes: const [ExponentialStrengthPipe], - directives: const [FORM_DIRECTIVES]) + directives: const [COMMON_DIRECTIVES]) class PowerBoostCalculator { - int power = 5; - int factor = 1; + // XXX: These should be ints, but that causes exceptions in checked mode. + String power = '5'; + String factor = '1'; } diff --git a/public/docs/_examples/pipes/dart/lib/power_booster.dart b/public/docs/_examples/pipes/dart/lib/power_booster.dart index 415a8e58ff..194abe1b0c 100644 --- a/public/docs/_examples/pipes/dart/lib/power_booster.dart +++ b/public/docs/_examples/pipes/dart/lib/power_booster.dart @@ -1,12 +1,13 @@ -library pipe_examples.power_booster; - import 'package:angular2/angular2.dart'; -import 'package:pipe_examples/exponential_strength_pipe.dart'; +import 'exponential_strength_pipe.dart'; -@Component(selector: 'power-booster') -@View( +@Component( + selector: 'power-booster', template: ''' -

Super power boost: {{2 | exponentialStrength: 10}}

+

Power Booster

+

+ Super power boost: {{2 | exponentialStrength: 10}} +

''', pipes: const [ExponentialStrengthPipe]) class PowerBooster {} diff --git a/public/docs/_examples/pipes/dart/pubspec.yaml b/public/docs/_examples/pipes/dart/pubspec.yaml index 3e9fbacc85..603fb8b68d 100644 --- a/public/docs/_examples/pipes/dart/pubspec.yaml +++ b/public/docs/_examples/pipes/dart/pubspec.yaml @@ -2,8 +2,10 @@ name: pipe_examples description: Pipes Example version: 0.0.1 dependencies: - angular2: 2.0.0-alpha.45 + angular2: 2.0.0-beta.3 browser: ^0.10.0 transformers: - angular2: + platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES' + platform_pipes: 'package:angular2/common.dart#COMMON_PIPES' entry_points: web/main.dart diff --git a/public/docs/_examples/pipes/dart/web/heroes.json b/public/docs/_examples/pipes/dart/web/heroes.json index 6248df4575..436b220d53 100644 --- a/public/docs/_examples/pipes/dart/web/heroes.json +++ b/public/docs/_examples/pipes/dart/web/heroes.json @@ -1,17 +1,6 @@ [ - { - "id":1, - "firstName":"Eenie", - "lastName":"Toe" - }, - { - "id":2, - "firstName":"Meenie", - "lastName":"Toe" - }, - { - "id":3, - "firstName":"Miny", - "lastName":"Toe" - } + {"name": "Windstorm"}, + {"name": "Bombasto"}, + {"name": "Magneto"}, + {"name": "Tornado"} ] diff --git a/public/docs/_examples/pipes/dart/web/index.html b/public/docs/_examples/pipes/dart/web/index.html index 26d8eeebd9..190cd7df3e 100644 --- a/public/docs/_examples/pipes/dart/web/index.html +++ b/public/docs/_examples/pipes/dart/web/index.html @@ -1,17 +1,16 @@ - Pipes Example - - - + Pipes Example + + - - - - - - - - + + +

Hero Birthday v.1

+ hero-birthday loading... + + my-app loading ... + + diff --git a/public/docs/_examples/pipes/dart/web/main.dart b/public/docs/_examples/pipes/dart/web/main.dart index 722539dc5f..72e510805c 100644 --- a/public/docs/_examples/pipes/dart/web/main.dart +++ b/public/docs/_examples/pipes/dart/web/main.dart @@ -1,16 +1,8 @@ import 'package:angular2/bootstrap.dart'; -import 'package:pipe_examples/hero_birthday.dart'; -import 'package:pipe_examples/chained_pipes.dart'; -import 'package:pipe_examples/power_booster.dart'; -import 'package:pipe_examples/power_boost_calculator.dart'; -import 'package:pipe_examples/my_hero.dart'; -import 'package:pipe_examples/heroes_list.dart'; +import 'package:pipe_examples/app_component.dart'; +import 'package:pipe_examples/hero_birthday1_component.dart'; main() { + bootstrap(AppComponent); bootstrap(HeroBirthday); - bootstrap(ChainedPipes); - bootstrap(PowerBooster); - bootstrap(PowerBoostCalculator); - bootstrap(MyHero); - bootstrap(HeroesList); } diff --git a/public/docs/_examples/pipes/dart/web/style.css b/public/docs/_examples/pipes/dart/web/style.css deleted file mode 100644 index e69de29bb2..0000000000