samples(dart pipes): update to b3 and latest TS UI

Based on #821 by tomplusplus.

Closes #827.

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
+}

public/docs/_examples/pipes/dart/lib/app_component.html

@@ -0,0 +1,36 @@
+<hr>
+<!-- async examples at the top so can see them in action -->
+<hero-message></hero-message>
+
+<hr>
+<hero-list></hero-list>
+
+<hr>
+<p>The hero's birthday is {{ birthday | date }}</p>
+
+<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
+
+<hr>
+<h4>Hero Birthday v.2</h4>
+<hero-birthday>loading...</hero-birthday>
+<hr>
+
+
+<p>
+    The chained hero's birthday is
+    {{ birthday | date | uppercase}}
+</p>
+
+<p>
+    The chained hero's birthday is
+    {{  birthday | date:'fullDate' | uppercase}}
+</p>
+<p>
+    The chained hero's birthday is
+    {{ ( birthday | date:'fullDate' ) | uppercase}}
+</p>
+<hr>
+<power-booster>loading...</power-booster>
+
+<hr>
+<power-boost-calculator>loading ..</power-boost-calculator>

public/docs/_examples/pipes/dart/lib/chained_pipes.dart

@@ -1,22 +0,0 @@
-library pipe_examples.chained_pipes;
-
-import 'package:angular2/angular2.dart';
-
-@Component(selector: 'chained-pipes')
-@View(
-    template: '''
-<p>
-  The chained hero's birthday is
-  {{ birthday | date | uppercase}}
-</p>
-The chained hero's birthday is
-  {{ birthday | date:'fullDate' }}
-</p>
-<p>
-  The chained hero's birthday is
-  {{ ( birthday | date:'fullDate' ) | uppercase}}
-</p>
-''')
-class ChainedPipes {
-  DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988
-}

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<dynamic> args]) {
     var v = int.parse(value.toString(), onError: (source) => 0);
     var p = args.isEmpty

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<dynamic> _fetchPromise;
   transform(dynamic value, [List<dynamic> args]) {

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')
+@Component(
-@View(
+    selector: 'hero-message', template: 'Message: {{delayedMessage | async}}')
-    template: '''
+class HeroAsyncMessageComponent {
-<p>Message: {{delayedMessage | async}}</p>
-''')
-class MyHero {
   Future<String> delayedMessage =
       new Future.delayed(new Duration(milliseconds: 500), () {
     return 'You are my Hero!';

public/docs/_examples/pipes/dart/lib/hero_birthday.dart

@@ -1,21 +0,0 @@
-library pipe_examples.hero_birthday;
-
-import 'package:angular2/angular2.dart';
-
-@Component(selector: 'hero-birthday')
-@View(
-    template: '''
-<p>The hero's birthday is {{ birthday | date:format }}</p>
-<button (click)="toggleFormat()">Toggle Format</button>
-''')
-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;
-  }
-}

public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart

@@ -0,0 +1,10 @@
+import 'package:angular2/angular2.dart';
+
+@Component(
+    selector: 'hero-birthday',
+    template: '''
+      <p>The hero's birthday is {{ birthday | date }}</p>
+    ''')
+class HeroBirthday {
+  DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988
+}

public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart

@@ -0,0 +1,19 @@
+import 'package:angular2/angular2.dart';
+
+@Component(
+    selector: 'hero-birthday',
+    template: '''
+      <p>The hero's birthday is {{ birthday | date:format }}</p>
+      <button (click)="toggleFormat()">Toggle Format</button>
+    ''')
+class HeroBirthday {
+  DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988
+
+  bool toggle = true;
+
+  get format => toggle ? 'shortDate' : 'fullDate';
+
+  void toggleFormat() {
+    toggle = !toggle;
+  }
+}

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: '''
+    <h4>Heroes from JSON File</h4>
+
+    <div *ngFor="#hero of ('heroes.json' | fetch) ">
+      {{hero['name']}}
+    </div>
+
+    <p>Heroes as JSON:
+    {{'heroes.json' | fetch | json}}
+    </p>
+''',
+    pipes: const [FetchJsonPipe])
+class HeroListComponent {}

public/docs/_examples/pipes/dart/lib/heroes_list.dart

@@ -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: '''
-<p>Heroes: {{'heroes.json' | fetch | json}}</p>
-''',
-    pipes: const [FetchJsonPipe])
-class HeroesList {}

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')
+import 'exponential_strength_pipe.dart';
-@View(
+
+@Component(
+    selector: 'power-boost-calculator',
     template: '''
 <h2>Power Boost Calculator</h2>
-<div>Normal power: <input [(ng-model)]="power"></div>
+<div>Normal power: <input [(ngModel)]="power" /></div>
-<div>Boost factor: <input [(ng-model)]="factor"></div>
+<div>Boost factor: <input [(ngModel)]="factor" /></div>
 <p>
   Super Hero Power: {{power | exponentialStrength: factor}}
 </p>
 ''',
     pipes: const [ExponentialStrengthPipe],
-    directives: const [FORM_DIRECTIVES])
+    directives: const [COMMON_DIRECTIVES])
 class PowerBoostCalculator {
-  int power = 5;
+  // XXX: These should be ints, but that causes exceptions in checked mode.
-  int factor = 1;
+  String power = '5';
+  String factor = '1';
 }

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')
+@Component(
-@View(
+    selector: 'power-booster',
     template: '''
-<p>Super power boost: {{2 | exponentialStrength: 10}}</p>
+    <h2>Power Booster</h2>
+    <p>
+      Super power boost: {{2 | exponentialStrength: 10}}
+    </p>
 ''',
     pipes: const [ExponentialStrengthPipe])
 class PowerBooster {}

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

public/docs/_examples/pipes/dart/web/heroes.json

@@ -1,17 +1,6 @@
 [
-  {
+  {"name": "Windstorm"},
-    "id":1,
+  {"name": "Bombasto"},
-    "firstName":"Eenie",
+  {"name": "Magneto"},
-    "lastName":"Toe"
+  {"name": "Tornado"}
-  },
-  {
-    "id":2,
-    "firstName":"Meenie",
-    "lastName":"Toe"
-  },
-  {
-    "id":3,
-    "firstName":"Miny",
-    "lastName":"Toe"
-  }
 ]

public/docs/_examples/pipes/dart/web/index.html

@@ -2,16 +2,15 @@
 <html>
 <head>
   <title>Pipes Example</title>
-    <link rel="stylesheet" href="style.css">
+  <script defer src="main.dart" type="application/dart"></script>
-    <script async src="main.dart" type="application/dart"></script>
+  <script defer src="packages/browser/dart.js"></script>
-    <script async src="packages/browser/dart.js"></script>
 </head>
+
   <body>
-<hero-birthday></hero-birthday>
+    <h4>Hero Birthday v.1</h4>
-<chained-pipes></chained-pipes>
+    <hero-birthday>hero-birthday loading...</hero-birthday>
-<power-booster></power-booster>
+
-<power-boost-calculator></power-boost-calculator>
+    <my-app>my-app loading ...</my-app>
-<my-hero></my-hero>
-<heroes-list></heroes-list>
   </body>
+
 </html>

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/app_component.dart';
-import 'package:pipe_examples/chained_pipes.dart';
+import 'package:pipe_examples/hero_birthday1_component.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';
 
 main() {
+  bootstrap(AppComponent);
   bootstrap(HeroBirthday);
-  bootstrap(ChainedPipes);
-  bootstrap(PowerBooster);
-  bootstrap(PowerBoostCalculator);
-  bootstrap(MyHero);
-  bootstrap(HeroesList);
 }