Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit ad95b04

Browse files
chalinthso
chalin
authored and
thso
committed
docs(dev guide): pipes - new Dart prose, update Dart and Ts code (#1353)
+ guide/pipes/ts: update docs and example code + guide/pipes/dart: new prose, updated example code + fix platform_directives reference; html cleanup + enable pipes e2e testing For `e2e-spec.js`: If the async test is executed too early it will fail (simply because the async message hasn’t been received yet). + follow new constants naming convention
1 parent c1440e7 commit ad95b04

30 files changed

+431
-202
lines changed

‎public/_includes/_util-fns.jade

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
- var _array = 'array';
1616
- var _an_array = 'an array';
1717

18+
//- Promise vs. Future, etc
19+
- var _Promise = 'Promise';
20+
- var _Observable = 'Observable';
21+
1822
//- Used to prefix identifiers that are private. In Dart this will be '_'.
1923
- var _priv = '';
2024

‎public/docs/_examples/pipes/dart/example-config.json

Whitespace-only changes.

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

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1+
// #docregion
12
import 'package:angular2/angular2.dart';
23

4+
import 'flying_heroes_component.dart';
35
import 'hero_async_message_component.dart';
6+
import 'hero_birthday1_component.dart';
47
import 'hero_birthday2_component.dart';
58
import 'hero_list_component.dart';
6-
import 'power_booster.dart';
7-
import 'power_boost_calculator.dart';
9+
import 'power_boost_calculator_component.dart';
10+
import 'power_booster_component.dart';
811

912
@Component(
1013
selector: 'my-app',
1114
templateUrl: 'app_component.html',
1215
directives: const [
16+
FlyingHeroesComponent,
17+
FlyingHeroesImpureComponent,
1318
HeroAsyncMessageComponent,
1419
HeroBirthday,
20+
HeroBirthday2,
1521
HeroListComponent,
22+
PowerBoostCalculator,
1623
PowerBooster,
17-
PowerBoostCalculator
1824
])
1925
class AppComponent {
2026
DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988

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

+63-16
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,83 @@
1-
<hr>
2-
<!-- async examples at the top so can see them in action -->
3-
<hero-message></hero-message>
1+
<a id="toc"></a>
2+
<h1>Pipes</h1>
3+
<a href="#happy-birthday1">Happy Birthday v1</a><br>
4+
<a href="#birthday-date-pipe">Birthday DatePipe</a><br>
5+
<a href="#happy-birthday2">Happy Birthday v2</a><br>
6+
<a href="#birthday-pipe-chaining">Birthday Pipe Chaining</a><br>
7+
<a href="#power-booster">Power Booster custom pipe</a><br>
8+
<a href="#power-boost-calc">Power Boost Calculator custom pipe with params</a><br>
9+
<a href="#flying-heroes">Flying Heroes filter pipe (pure)</a><br>
10+
<a href="#flying-heroes-impure">Flying Heroes filter pipe (impure)</a><br>
11+
<a href="#hero-message">Async Hero Message and AsyncPipe</a><br>
12+
<a href="#hero-list">Hero List with caching FetchJsonPipe</a><br>
13+
414

515
<hr>
6-
<hero-list></hero-list>
16+
<a id="happy-birthday1"></a>
17+
<h2>Hero Birthday v1</h2>
18+
<hero-birthday></hero-birthday>
719

820
<hr>
21+
<a id="birthday-date-pipe"></a>
22+
<h2>Birthday DatePipe</h2>
23+
<!-- #docregion hero-birthday-template -->
924
<p>The hero's birthday is {{ birthday | date }}</p>
25+
<!-- #enddocregion hero-birthday-template-->
1026

27+
<!-- #docregion format-birthday -->
1128
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
29+
<!-- #enddocregion format-birthday-->
1230

1331
<hr>
14-
<h4>Hero Birthday v.2</h4>
15-
<hero-birthday>loading...</hero-birthday>
16-
<hr>
17-
32+
<a id="happy-birthday2"></a>
33+
<h2>Hero Birthday v2</h2>
34+
<hero-birthday2></hero-birthday2>
1835

36+
<hr>
37+
<a id="birthday-pipe-chaining"></a>
38+
<h2>Birthday Pipe Chaining</h2>
1939
<p>
20-
The chained hero's birthday is
21-
{{ birthday | date | uppercase}}
40+
<!-- #docregion chained-birthday -->
41+
The chained hero's birthday is
42+
{{ birthday | date | uppercase}}
43+
<!-- #enddocregion chained-birthday -->
2244
</p>
2345

2446
<p>
25-
The chained hero's birthday is
26-
{{ birthday | date:'fullDate' | uppercase}}
47+
<!-- #docregion chained-parameter-birthday -->
48+
The chained hero's birthday is
49+
{{ birthday | date:'fullDate' | uppercase}}
50+
<!-- #enddocregion chained-parameter-birthday -->
2751
</p>
2852
<p>
29-
The chained hero's birthday is
30-
{{ ( birthday | date:'fullDate' ) | uppercase}}
53+
<!-- #docregion chained-parameter-birthday-parens -->
54+
The chained hero's birthday is
55+
{{ ( birthday | date:'fullDate' ) | uppercase}}
56+
<!-- #enddocregion chained-parameter-birthday-parens -->
3157
</p>
3258
<hr>
33-
<power-booster>loading...</power-booster>
59+
<a id="power-booster"></a>
60+
<power-booster></power-booster>
61+
62+
<hr>
63+
<a id="power-boost-calc"></a>
64+
<power-boost-calculator>loading</power-boost-calculator>
3465

3566
<hr>
36-
<power-boost-calculator>loading ..</power-boost-calculator>
67+
<a id="flying-heroes"></a>
68+
<flying-heroes></flying-heroes>
69+
70+
<hr>
71+
<a id="flying-heroes-impure"></a>
72+
<flying-heroes-impure></flying-heroes-impure>
73+
74+
<hr>
75+
<a id="hero-message"></a>
76+
<!-- async examples at the top so can see them in action -->
77+
<hero-message></hero-message>
78+
79+
<hr>
80+
<a id="hero-list"></a>
81+
<hero-list></hero-list>
82+
83+
<div style="margin-top:12em;"></div>

‎public/docs/_examples/pipes/dart/lib/exponential_strength_pipe.dart

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
// #docregion
12
import 'dart:math' as math;
2-
33
import 'package:angular2/angular2.dart';
44

55
/*
@@ -13,11 +13,13 @@ import 'package:angular2/angular2.dart';
1313
*/
1414
@Pipe(name: 'exponentialStrength')
1515
class ExponentialStrengthPipe extends PipeTransform {
16-
transform(dynamic value, [List<dynamic> args]) {
17-
var v = int.parse(value.toString(), onError: (source) => 0);
18-
var p = args.isEmpty
16+
num transform(dynamic _value, [List<dynamic> args]) {
17+
var exponent = args.isEmpty
1918
? 1
20-
: int.parse(args.first.toString(), onError: (source) => 1);
21-
return math.pow(v, p);
19+
: args.first is num
20+
? args.first
21+
: num.parse(args.first.toString(), (_) => 1);
22+
var value = _value is num ? _value : num.parse(_value.toString(), (_) => 0);
23+
return math.pow(value, exponent);
2224
}
2325
}

‎public/docs/_examples/pipes/dart/lib/fetch_json_pipe.dart

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
// #docregion
2-
import 'dart:html';
3-
import 'dart:async';
42
import 'dart:convert';
3+
import 'dart:html';
54

65
import 'package:angular2/angular2.dart';
76

87
// #docregion pipe-metadata
98
@Pipe(name: 'fetch', pure: false)
109
// #enddocregion pipe-metadata
1110
class FetchJsonPipe extends PipeTransform {
12-
dynamic _fetchedValue;
13-
Future<dynamic> _fetchPromise;
11+
dynamic _fetchedJson;
12+
String _prevUrl;
1413

15-
transform(dynamic url, [List<dynamic> args]) {
16-
if (_fetchPromise == null) {
17-
_fetchPromise = new Future(() async {
18-
_fetchedValue = JSON.decode(await HttpRequest.getString(url));
19-
});
14+
dynamic transform(dynamic url, [List<dynamic> args]) {
15+
if (url != _prevUrl) {
16+
_prevUrl = url;
17+
_fetchedJson = null;
18+
HttpRequest.getString(url).then((s) {
19+
_fetchedJson = JSON.decode(s);
20+
});
2021
}
21-
return _fetchedValue;
22+
return _fetchedJson;
2223
}
2324
}

‎public/docs/_examples/pipes/dart/lib/flying_heroes_component.dart

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// #docplaster
2+
// #docregion
3+
import 'package:angular2/angular2.dart';
4+
import 'flying_heroes_pipe.dart';
5+
import 'heroes.dart';
6+
7+
@Component(
8+
selector: 'flying-heroes',
9+
templateUrl: 'flying_heroes_component.html',
10+
styles: const ['#flyers, #all {font-style: italic}'],
11+
pipes: const [FlyingHeroesPipe])
12+
// #docregion v1
13+
class FlyingHeroesComponent {
14+
List<Hero> heroes;
15+
bool canFly = true;
16+
// #enddocregion v1
17+
bool mutate = true;
18+
String title = 'Flying Heroes (pure pipe)';
19+
20+
// #docregion v1
21+
FlyingHeroesComponent() {
22+
reset();
23+
}
24+
25+
void addHero(String name) {
26+
name = name.trim();
27+
if (name.isEmpty) return;
28+
29+
var hero = new Hero(name, canFly);
30+
// #enddocregion v1
31+
if (mutate) {
32+
// Pure pipe won't update display because heroes list
33+
// reference is unchanged; Impure pipe will display.
34+
// #docregion v1, push
35+
heroes.add(hero);
36+
// #enddocregion v1, push
37+
} else {
38+
// Pipe updates display because heroes list is a new object
39+
// #docregion concat
40+
heroes = new List<Hero>.from(heroes)..add(hero);
41+
// #enddocregion concat
42+
}
43+
// #docregion v1
44+
}
45+
46+
void reset() {
47+
heroes = new List<Hero>.from(mockHeroes);
48+
}
49+
}
50+
// #enddocregion v1
51+
52+
//\\\\ Identical except for impure pipe \\\\\\
53+
// #docregion impure-component
54+
@Component(
55+
selector: 'flying-heroes-impure',
56+
templateUrl: 'flying_heroes_component.html',
57+
// #enddocregion impure-component
58+
styles: const ['.flyers, .all {font-style: italic}'],
59+
// #docregion impure-component
60+
pipes: const [FlyingHeroesImpurePipe])
61+
class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
62+
FlyingHeroesImpureComponent() {
63+
title = 'Flying Heroes (impure pipe)';
64+
}
65+
}
66+
// #docregion impure-component

‎public/docs/_examples/pipes/dart/lib/flying_heroes_component.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!-- #docplaster-->
2+
<!-- #docregion -->
3+
<h2>{{title}}</h2>
4+
<p>
5+
<!-- #docregion template-1 -->
6+
New hero:
7+
<input type="text" #box
8+
(keyup.enter)="addHero(box.value); box.value=''"
9+
placeholder="hero name">
10+
<!-- #enddocregion template-1 -->
11+
<input id="can-fly" type="checkbox" [(ngModel)]="canFly"> can fly
12+
</p>
13+
<p>
14+
<input id="mutate" type="checkbox" [(ngModel)]="mutate">Mutate array
15+
<!-- #docregion template-1 -->
16+
<button (click)="reset()">Reset</button>
17+
<!-- #enddocregion template-1 -->
18+
</p>
19+
20+
<h4>Heroes who fly (piped)</h4>
21+
<div id="flyers">
22+
<!-- #docregion template-flying-heroes -->
23+
<div *ngFor="#hero of (heroes | flyingHeroes)">
24+
{{hero.name}}
25+
</div>
26+
<!-- #enddocregion template-flying-heroes -->
27+
</div>
28+
29+
<h4>All Heroes (no pipe)</h4>
30+
<div id="all">
31+
<!-- #docregion template-1 -->
32+
<!-- #docregion template-all-heroes -->
33+
<div *ngFor="#hero of heroes">
34+
{{hero.name}}
35+
</div>
36+
<!-- #enddocregion template-all-heroes -->
37+
<!-- #enddocregion template-1 -->
38+
</div>

‎public/docs/_examples/pipes/dart/lib/flying_heroes_pipe.dart

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// #docregion
2+
// #docregion pure
3+
import 'package:angular2/angular2.dart';
4+
import 'heroes.dart';
5+
6+
@Pipe(name: 'flyingHeroes')
7+
class FlyingHeroesPipe extends PipeTransform {
8+
// #docregion filter
9+
List<Hero> transform(dynamic value, [List<dynamic> args]) =>
10+
value.where((hero) => hero.canFly).toList();
11+
// #enddocregion filter
12+
}
13+
// #enddocregion pure
14+
15+
// Identical except for the pure flag
16+
// #docregion impure, pipe-decorator
17+
@Pipe(name: 'flyingHeroes', pure: false)
18+
// #enddocregion pipe-decorator
19+
class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}

‎public/docs/_examples/pipes/dart/lib/hero_async_message_component.dart

+25-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,32 @@
1+
// #docregion
12
import 'dart:async';
23

34
import 'package:angular2/angular2.dart';
45

56
@Component(
6-
selector: 'hero-message', template: 'Message: {{delayedMessage | async}}')
7+
selector: 'hero-message',
8+
template: '''
9+
<h2>Async Hero Message and AsyncPipe</h2>
10+
<p>Message: {{ message | async }}</p>
11+
<button (click)="resend()">Resend</button>
12+
''')
713
class HeroAsyncMessageComponent {
8-
Future<String> delayedMessage =
9-
new Future.delayed(new Duration(milliseconds: 500), () {
10-
return 'You are my Hero!';
11-
});
14+
static const _msgEventDelay = const Duration(milliseconds: 500);
15+
16+
Stream<String> message;
17+
18+
HeroAsyncMessageComponent() {
19+
resend();
20+
}
21+
22+
void resend() {
23+
message =
24+
new Stream.periodic(_msgEventDelay, (i) => _msgs[i]).take(_msgs.length);
25+
}
26+
27+
List<String> _msgs = <String>[
28+
'You are my hero!',
29+
'You are the best hero!',
30+
'Will you be my hero?'
31+
];
1232
}

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
// #docregion
12
import 'package:angular2/angular2.dart';
23

34
@Component(
45
selector: 'hero-birthday',
5-
template: '''
6-
<p>The hero's birthday is {{ birthday | date }}</p>
7-
''')
6+
// #docregion hero-birthday-template
7+
template: "<p>The hero's birthday is {{ birthday | date }}</p>"
8+
// #enddocregion hero-birthday-template
9+
)
810
class HeroBirthday {
911
DateTime birthday = new DateTime(1988, 4, 15); // April 15, 1988
1012
}

0 commit comments

Comments
 (0)