iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Based on #821 by tomplusplus.

Closes #827.
This commit is contained in:
Kathy Walrath 2016-02-09 13:50:08 -08:00
parent 096b99f2ae
commit 0f5ea46590
18 changed files with 148 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/docs/_examples/pipes/dart/lib/app_component.dart Normal file
View File

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

36
public/docs/_examples/pipes/dart/lib/app_component.html Normal file
View File

@ -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>

22
public/docs/_examples/pipes/dart/lib/chained_pipes.dart
View File

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

4
public/docs/_examples/pipes/dart/lib/exponential_strength_pipe.dart
View File

@ -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

4
public/docs/_examples/pipes/dart/lib/fetch_json_pipe.dart
View File

@ -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]) {

11
public/docs/_examples/pipes/dart/lib/my_hero.dart → public/docs/_examples/pipes/dart/lib/hero_async_message_component.dart
View File

@ -1,15 +1,10 @@
library pipe_examples.my_hero;
import 'dart:async';
import 'package:angular2/angular2.dart';
@Component(selector: 'my-hero')
@View(
template: '''
<p>Message: {{delayedMessage | async}}</p>
''')
class MyHero {
@Component(
selector: 'hero-message', template: 'Message: {{delayedMessage | async}}')
class HeroAsyncMessageComponent {
Future<String> delayedMessage =
new Future.delayed(new Duration(milliseconds: 500), () {
return 'You are my Hero!';

21
public/docs/_examples/pipes/dart/lib/hero_birthday.dart
View File

@ -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;
}
}

10
public/docs/_examples/pipes/dart/lib/hero_birthday1_component.dart Normal file
View File

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

19
public/docs/_examples/pipes/dart/lib/hero_birthday2_component.dart Normal file
View File

@ -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;
}
}

19
public/docs/_examples/pipes/dart/lib/hero_list_component.dart Normal file
View File

@ -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 {}

12
public/docs/_examples/pipes/dart/lib/heroes_list.dart
View File

@ -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 {}

20
public/docs/_examples/pipes/dart/lib/power_boost_calculator.dart
View File

@ -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: '''
<h2>Power Boost Calculator</h2>
<div>Normal power: <input [(ng-model)]="power"></div>
<div>Boost factor: <input [(ng-model)]="factor"></div>
<div>Normal power: <input [(ngModel)]="power" /></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;
int factor = 1;
// XXX: These should be ints, but that causes exceptions in checked mode.
String power = '5';
String factor = '1';
}

13
public/docs/_examples/pipes/dart/lib/power_booster.dart
View File

@ -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: '''
<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 {}

4
public/docs/_examples/pipes/dart/pubspec.yaml
View File

@ -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

19
public/docs/_examples/pipes/dart/web/heroes.json
View File

@ -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"}
]

23
public/docs/_examples/pipes/dart/web/index.html
View File

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

14
public/docs/_examples/pipes/dart/web/main.dart
View File

@ -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);
}

0
public/docs/_examples/pipes/dart/web/style.css
View File