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

docs(pipes/dart): improve FetchJsonPipe discussion #2937

Merged
merged 1 commit into from
Dec 7, 2016
Merged

docs(pipes/dart): improve FetchJsonPipe discussion #2937

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions public/docs/_examples/pipes/dart/lib/fetch_json_pipe.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ import 'package:angular2/angular2.dart';
@Pipe(name: 'fetch', pure: false)
// #enddocregion pipe-metadata
class FetchJsonPipe extends PipeTransform {
dynamic _fetchedJson;
String _prevUrl;
dynamic _cachedData;
String _cachedUrl;

dynamic transform(String url) {
if (url != _prevUrl) {
_prevUrl = url;
_fetchedJson = null;
if (url != _cachedUrl) {
_cachedUrl = url;
_cachedData = null;
HttpRequest.getString(url).then((s) {
_fetchedJson = JSON.decode(s);
});
_cachedData = JSON.decode(s);
});
}
return _fetchedJson;
return _cachedData;
}
}
7 changes: 2 additions & 5 deletions public/docs/_examples/pipes/dart/lib/hero_list_component.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,14 @@ import 'fetch_json_pipe.dart';

@Component(
selector: 'hero-list',
// #docregion template
template: '''
<h4>Heroes from JSON File</h4>
<h2>Heroes from JSON File</h2>
<div *ngFor="let hero of ('heroes.json' | fetch) ">
{{hero['name']}}
</div>
<p>Heroes as JSON:
{{'heroes.json' | fetch | json}}
</p>
<p>Heroes as JSON: {{'heroes.json' | fetch | json}}</p>
''',
pipes: const [FetchJsonPipe])
class HeroListComponent {}
35 changes: 21 additions & 14 deletions public/docs/ts/_cache/guide/pipes.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,14 +162,16 @@ figure.image-display
figure.image-display
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")

- var _decls = _docsFor == 'dart' ? 'pipes' : 'declarations';
- var _appMod = _docsFor == 'dart' ? '@Component' : 'AppModule';
:marked
Two things to note:
1. We use our custom pipe the same way we use the built-in pipes.

1. We must include our pipe in the `pipes` #{_array} of the `@Component` #{_decorator}.
1. We use our custom pipe the same way we use built-in pipes.
1. We must include our pipe in the `!{_decls}` #{_array} of the `!{_appMod}`.

.callout.is-helpful
header Remember the pipes #{_array}!
header Remember the !{_decls} #{_array}!
:marked
Angular reports an error if we neglect to list our custom pipe.
We didn't list the `DatePipe` in our previous example because all
Expand All @@ -186,7 +188,7 @@ figure.image-display
We could upgrade the example to a "Power Boost Calculator" that combines
our pipe and two-way data binding with `ngModel`.

+makeExample('pipes/ts/app/power-boost-calculator.component.ts', null, '/app/power-boost-calculator.component.ts')(format='.')
+makeExample('app/power-boost-calculator.component.ts')

figure.image-display
img(src='/resources/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator")
Expand Down Expand Up @@ -331,10 +333,16 @@ block pure-change
The only difference is the `pure` flag in the pipe metadata.

This is a good candidate for an impure pipe because the `transform` function is trivial and fast.
+makeExample('pipes/ts/app/flying-heroes.pipe.ts','filter')(format='.')

We can derive a `FlyingHeroesImpureComponent` that we derive from the `FlyingHeroesComponent`.
+makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component','app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.')
+makeExcerpt('app/flying-heroes.pipe.ts','filter', '')

:marked
We can derive a `FlyingHeroesImpureComponent` from `FlyingHeroesComponent`.

- var _fnSuffix = _docsFor == 'dart' ? '.component.ts' : '-impure.component.html';
- var _region = _docsFor == 'dart' ? 'impure-component' : 'template-flying-heroes';
+makeExcerpt('app/flying-heroes' + _fnSuffix + ' (excerpt)', _region)

:marked
The only substantive change is the pipe in the template.
We can confirm in the <live-example></live-example> that the _flying heroes_
Expand All @@ -361,7 +369,7 @@ h3#async-pipe The impure #[i AsyncPipe]
The component doesn't have to subscribe to the async data source,
it doesn't extract the resolved values and expose them for binding,
and the component doesn't have to unsubscribe when it is destroyed
(a potential source of memory leaks).
(a potent source of memory leaks).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change (potential -> potent) seems questionable, but since it's not yours, Patrice...

@kapunahelewong maybe you can fix it?

Copy link
Contributor Author

@chalin chalin Dec 7, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I found that a bit strange too, but decided to go along with @wardbell on that one (focusing instead on the heart of the changes at hand).


### An impure caching pipe

Expand All @@ -372,14 +380,14 @@ h3#async-pipe The impure #[i AsyncPipe]

We are careful.
The pipe only calls the server when the request URL changes and it caches the server response.
Here's the code, which uses the [Angular http](server-communication.html) client to retrieve data:
Here's the code<span if-docs="ts">, which uses the [Angular http](server-communication.html) client to retrieve data</span>:

+makeExample('pipes/ts/app/fetch-json.pipe.ts', null, 'app/fetch-json.pipe.ts')
+makeExample('app/fetch-json.pipe.ts')
:marked
Then we demonstrate it in a harness component whose template defines two bindings to this pipe,
both requesting the heroes from the `heroes.json` file.

+makeExample('pipes/ts/app/hero-list.component.ts', null, 'app/hero-list.component.ts')
+makeExample('app/hero-list.component.ts')
:marked
The component renders like this:

Expand All @@ -392,7 +400,6 @@ figure.image-display
* each pipe instance caches its own url and data
* each pipe instance only calls the server once

:marked
### *JsonPipe*

The second `fetch` pipe binding above demonstrates more pipe chaining.
Expand All @@ -404,8 +411,8 @@ figure.image-display
The [JsonPipe](../api/common/index/JsonPipe-pipe.html)
provides an easy way to diagnosis a mysteriously failing data binding or
inspect an object for future binding.
a(id="pure-pipe-pure-fn")

a#pure-pipe-pure-fn
:marked
### Pure pipes and pure functions

Expand Down
31 changes: 19 additions & 12 deletions public/docs/ts/latest/guide/pipes.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,14 +162,16 @@ figure.image-display
figure.image-display
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")

- var _decls = _docsFor == 'dart' ? 'pipes' : 'declarations';
- var _appMod = _docsFor == 'dart' ? '@Component' : 'AppModule';
:marked
Two things to note:
1. We use our custom pipe the same way we use the built-in pipes.

1. We must include our pipe in the `declarations` #{_array} of the AppModule.
1. We use our custom pipe the same way we use built-in pipes.
1. We must include our pipe in the `!{_decls}` #{_array} of the `!{_appMod}`.

.callout.is-helpful
header Remember the declarations #{_array}!
header Remember the !{_decls} #{_array}!
:marked
Angular reports an error if we neglect to list our custom pipe.
We didn't list the `DatePipe` in our previous example because all
Expand All @@ -186,7 +188,7 @@ figure.image-display
We could upgrade the example to a "Power Boost Calculator" that combines
our pipe and two-way data binding with `ngModel`.

+makeExample('pipes/ts/app/power-boost-calculator.component.ts', null, '/app/power-boost-calculator.component.ts')(format='.')
+makeExample('app/power-boost-calculator.component.ts')

figure.image-display
img(src='/resources/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator")
Expand Down Expand Up @@ -331,10 +333,16 @@ block pure-change
The only difference is the `pure` flag in the pipe metadata.

This is a good candidate for an impure pipe because the `transform` function is trivial and fast.
+makeExample('pipes/ts/app/flying-heroes.pipe.ts','filter')(format='.')

We can derive a `FlyingHeroesImpureComponent` that we derive from the `FlyingHeroesComponent`.
+makeExample('pipes/ts/app/flying-heroes-impure.component.html','template-flying-heroes','app/flying-heroes-impure.component.html (FlyingHeroesImpureComponent)')(format='.')
+makeExcerpt('app/flying-heroes.pipe.ts','filter', '')

:marked
We can derive a `FlyingHeroesImpureComponent` from `FlyingHeroesComponent`.

- var _fnSuffix = _docsFor == 'dart' ? '.component.ts' : '-impure.component.html';
- var _region = _docsFor == 'dart' ? 'impure-component' : 'template-flying-heroes';
+makeExcerpt('app/flying-heroes' + _fnSuffix + ' (excerpt)', _region)

:marked
The only substantive change is the pipe in the template.
We can confirm in the <live-example></live-example> that the _flying heroes_
Expand Down Expand Up @@ -372,14 +380,14 @@ h3#async-pipe The impure #[i AsyncPipe]

We are careful.
The pipe only calls the server when the request URL changes and it caches the server response.
Here's the code, which uses the [Angular http](server-communication.html) client to retrieve data:
Here's the code<span if-docs="ts">, which uses the [Angular http](server-communication.html) client to retrieve data</span>:

+makeExample('pipes/ts/app/fetch-json.pipe.ts', null, 'app/fetch-json.pipe.ts')
+makeExample('app/fetch-json.pipe.ts')
:marked
Then we demonstrate it in a harness component whose template defines two bindings to this pipe,
both requesting the heroes from the `heroes.json` file.

+makeExample('pipes/ts/app/hero-list.component.ts', null, 'app/hero-list.component.ts')
+makeExample('app/hero-list.component.ts')
:marked
The component renders like this:

Expand All @@ -392,7 +400,6 @@ figure.image-display
* each pipe instance caches its own url and data
* each pipe instance only calls the server once

:marked
### *JsonPipe*

The second `fetch` pipe binding above demonstrates more pipe chaining.
Expand All @@ -405,7 +412,7 @@ figure.image-display
provides an easy way to diagnosis a mysteriously failing data binding or
inspect an object for future binding.

a(id="pure-pipe-pure-fn")
a#pure-pipe-pure-fn
:marked
### Pure pipes and pure functions

Expand Down