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

Followup to #2923

```
Suites passed:
  public/docs/_examples/pipes/dart
```

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

@@ -8,17 +8,17 @@ import 'package:angular2/angular2.dart';
 @Pipe(name: 'fetch', pure: false)
 // #enddocregion pipe-metadata
 class FetchJsonPipe extends PipeTransform {
-  dynamic _fetchedJson;
+  dynamic _cachedData;
-  String _prevUrl;
+  String _cachedUrl;
 
   dynamic transform(String url) {
-    if (url != _prevUrl) {
+    if (url != _cachedUrl) {
-      _prevUrl = url;
+      _cachedUrl = url;
-      _fetchedJson = null;
+      _cachedData = null;
       HttpRequest.getString(url).then((s) {
-          _fetchedJson = JSON.decode(s);
+        _cachedData = JSON.decode(s);
       });
     }
-    return _fetchedJson;
+    return _cachedData;
   }
 }

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

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

public/docs/ts/_cache/guide/pipes.jade

@@ -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
@@ -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")
@@ -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`.
++makeExcerpt('app/flying-heroes.pipe.ts','filter', '')
-+makeExample('pipes/ts/app/flying-heroes.component.ts','impure-component','app/flying-heroes.component.ts (FlyingHeroesImpureComponent)')(format='.')
+
+: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_
@@ -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).
 
   ### An impure caching pipe
 
@@ -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:
 
@@ -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.
@@ -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
 

public/docs/ts/latest/guide/pipes.jade

@@ -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
@@ -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")
@@ -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`.
++makeExcerpt('app/flying-heroes.pipe.ts','filter', '')
-+makeExample('pipes/ts/app/flying-heroes-impure.component.html','template-flying-heroes','app/flying-heroes-impure.component.html (FlyingHeroesImpureComponent)')(format='.')
+
+: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_
@@ -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:
 
@@ -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.
@@ -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