docs(pipes): Add examples for all Angular pipes.

Closes #5103

modules/angular2/src/common/pipes/async_pipe.ts

@@ -41,21 +41,16 @@ var _observableStrategy = new ObservableStrategy();
  * When a new value is emitted, the `async` pipe marks the component to be checked for changes.
  *
  * ### Example
- * The example below binds the `time` Observable to the view. Every 500ms, the `time` Observable
- * updates the view with the current time.
  *
- * ```
- * import {Observable} from 'angular2/core';
- * @Component({
- *   selector: "task-cmp",
- *   template: "Time: {{ time | async }}"
- * })
- * class Task {
- *   time = new Observable<number>(observer => {
- *     setInterval(_ =>
- *       observer.next(new Date().getTime()), 500);
- *   });
- * }
+ * This example binds a `Promise` to the view. Clicking the `Resolve` button resolves the
+ * promise.
+ *
+ * {@example core/pipes/ts/async_pipe/async_pipe_example.ts region='AsyncPipe'}
+ *
+ * It's also possible to use `async` with Observables. The example below binds the `time` Observable
+ * to the view. Every 500ms, the `time` Observable updates the view with the current time.
+ *
+ * ```typescript
  * ```
  */
 @Pipe({name: 'async', pure: false})

modules/angular2/src/common/pipes/date_pipe.ts

@@ -77,10 +77,14 @@ var defaultLocale: string = 'en-US';
  * Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11)
  * in the _local_ time and locale is 'en-US':
  *
+ * ```
  *     {{ dateObj | date }}               // output is 'Jun 15, 2015'
  *     {{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
  *     {{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
  *     {{ dateObj | date:'mmss' }}        // output is '43:11'
+ * ```
+ *
+ * {@example core/pipes/ts/date_pipe/date_pipe_example.ts region='DatePipe'}
  */
 @CONST()
 @Pipe({name: 'date', pure: true})

modules/angular2/src/common/pipes/json_pipe.ts

@@ -4,25 +4,10 @@ import {PipeTransform, WrappedValue} from 'angular2/src/core/change_detection';
 import {Pipe} from 'angular2/src/core/metadata';
 
 /**
- * Implements json transforms to any object.
+ * Transforms any input value using `JSON.stringify`. Useful for debugging.
  *
  * ### Example
- *
- * In this example we transform the user object to json.
- *
- *  ```
- * @Component({
- *   selector: "user-cmp",
- *   template: "User: {{ user | json }}"
- * })
- * class Username {
- *  user:Object
- *  constructor() {
- *    this.user = { name: "PatrickJS" };
- *  }
- * }
- *
- * ```
+ * {@example core/pipes/ts/json_pipe/json_pipe_example.ts region='JsonPipe'}
  */
 @CONST()
 @Pipe({name: 'json', pure: false})

modules/angular2/src/common/pipes/lowercase_pipe.ts

@@ -2,26 +2,14 @@ import {isString, CONST, isBlank} from 'angular2/src/facade/lang';
 import {Injectable} from 'angular2/src/core/di';
 import {PipeTransform, WrappedValue} from 'angular2/src/core/change_detection';
 import {Pipe} from 'angular2/src/core/metadata';
-
 import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
 
 /**
- * Implements lowercase transforms to text.
+ * Transforms text to lowercase.
  *
  * ### Example
  *
- * In this example we transform the user text lowercase.
- *
- *  ```
- * @Component({
- *   selector: "username-cmp",
- *   template: "Username: {{ user | lowercase }}"
- * })
- * class Username {
- *   user:string;
- * }
- *
- * ```
+ * {@example core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts region='LowerUpperPipe'}
  */
 @CONST()
 @Pipe({name: 'lowercase'})

modules/angular2/src/common/pipes/number_pipe.ts

@@ -20,6 +20,9 @@ import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
 var defaultLocale: string = 'en-US';
 var _re = RegExpWrapper.create('^(\\d+)?\\.((\\d+)(\\-(\\d+))?)?$');
 
+/**
+ * Internal base class for numeric pipes.
+ */
 @CONST()
 @Injectable()
 export class NumberPipe {
@@ -78,11 +81,9 @@ export class NumberPipe {
  * For more information on the acceptable range for each of these numbers and other
  * details see your native internationalization library.
  *
- * ### Examples
+ * ### Example
  *
- *     {{ 123 | number }}              // output is 123
- *     {{ 123.1 | number: '.2-3' }}    // output is 123.10
- *     {{ 1 | number: '2.2' }}         // output is 01.00
+ * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='NumberPipe'}
  */
 @CONST()
 @Pipe({name: 'number'})
@@ -105,6 +106,10 @@ export class DecimalPipe extends NumberPipe implements PipeTransform {
  *     expression | percent[:digitInfo]
  *
  * For more information about `digitInfo` see {@link DecimalPipe}
+ *
+ * ### Example
+ *
+ * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='PercentPipe'}
  */
 @CONST()
 @Pipe({name: 'percent'})
@@ -131,6 +136,10 @@ export class PercentPipe extends NumberPipe implements PipeTransform {
  * symbol (e.g. $) or the currency code (e.g. USD) in the output. The default for this value
  * is `false`.
  * For more information about `digitInfo` see {@link DecimalPipe}
+ *
+ * ### Example
+ *
+ * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='CurrencyPipe'}
  */
 @CONST()
 @Pipe({name: 'currency'})

modules/angular2/src/common/pipes/slice_pipe.ts

@@ -44,13 +44,11 @@ import {Pipe} from 'angular2/src/core/metadata';
  * When operating on a [List], the returned list is always a copy even when all
  * the elements are being returned.
  *
- * ### Examples
- *
  * ## List Example
  *
- * Assuming `var collection = ['a', 'b', 'c', 'd']`, this `ng-for` directive:
+ * This `ng-for` example:
  *
- *     <li *ng-for="var i of collection | slice:1:3">{{i}}</li>
+ * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_list'}
  *
  * produces the following:
  *
@@ -59,12 +57,7 @@ import {Pipe} from 'angular2/src/core/metadata';
  *
  * ## String Examples
  *
- *     {{ 'abcdefghij' | slice:0:4 }}       // output is 'abcd'
- *     {{ 'abcdefghij' | slice:4:0 }}       // output is ''
- *     {{ 'abcdefghij' | slice:-4 }}      // output is 'ghij'
- *     {{ 'abcdefghij' | slice:-4,-2 }}      // output is 'gh'
- *     {{ 'abcdefghij' | slice: -100 }}    // output is 'abcdefghij'
- *     {{ 'abcdefghij' | slice: 100 }}    // output is ''
+ * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_string'}
  */
 
 @Pipe({name: 'slice', pure: false})

modules/angular2/src/common/pipes/uppercase_pipe.ts

@@ -9,18 +9,7 @@ import {InvalidPipeArgumentException} from './invalid_pipe_argument_exception';
  *
  * ### Example
  *
- * In this example we transform the user text uppercase.
- *
- *  ```
- * @Component({
- *   selector: "username-cmp",
- *   template: "Username: {{ user | uppercase }}"
- * })
- * class Username {
- *   user:string;
- * }
- *
- * ```
+ * {@example core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts region='LowerUpperPipe'}
  */
 @CONST()
 @Pipe({name: 'uppercase'})