diff --git a/modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.dart b/modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.dart new file mode 100644 index 0000000000..2bc22b2b2a --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.dart @@ -0,0 +1,2 @@ +library angular2.examples.core.pipes.ts.async_pipe; +// TODO(alxhub): Implement an example for Dart. \ No newline at end of file diff --git a/modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.ts b/modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.ts new file mode 100644 index 0000000000..89c8342dd7 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.ts @@ -0,0 +1,56 @@ +import {Component, provide, Observable} from 'angular2/angular2'; +import {bootstrap} from 'angular2/bootstrap'; + +// #docregion AsyncPipe +@Component({ + selector: 'async-example', + template: `
+

Wait for it... {{promise | async}}

+ +
` +}) +export class AsyncPipeExample { + resolved: boolean = false; + promise: Promise = null; + resolve: Function = null; + + constructor() { this.reset(); } + + reset() { + this.resolved = false; + this.promise = new Promise((resolve, reject) => { this.resolve = resolve; }); + } + + clicked() { + if (this.resolved) { + this.reset(); + } else { + this.resolve("resolved!"); + this.resolved = true; + } + } +} +// #enddocregion + +// #docregion AsyncPipeObservable +@Component({selector: "task-cmp", template: "Time: {{ time | async }}"}) +class Task { + time = new Observable( + observer => { setInterval(_ => observer.next(new Date().getTime()), 500); }); +} +// #enddocregion + +@Component({ + selector: 'example-app', + directives: [AsyncPipeExample], + template: ` +

AsyncPipe Example

+ + ` +}) +export class AppCmp { +} + +export function main() { + bootstrap(AppCmp); +} diff --git a/modules/angular2/examples/core/pipes/ts/async_pipe/index.html b/modules/angular2/examples/core/pipes/ts/async_pipe/index.html new file mode 100644 index 0000000000..3b4b0e30c7 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/async_pipe/index.html @@ -0,0 +1,24 @@ + + + + AsyncPipe Example + + + + + + + + + + + Loading... + + + + diff --git a/modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.dart b/modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.dart new file mode 100644 index 0000000000..40832aac06 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.dart @@ -0,0 +1,2 @@ +library angular2.examples.core.pipes.ts.date_pipe; +// TODO(alxhub): Implement an example for Dart. diff --git a/modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.ts b/modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.ts new file mode 100644 index 0000000000..f3985ed04a --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.ts @@ -0,0 +1,31 @@ +import {Component, provide} from 'angular2/angular2'; +import {bootstrap} from 'angular2/bootstrap'; + +// #docregion DatePipe +@Component({ + selector: 'date-example', + template: `
+

Today is {{today | date}}

+

Or if you prefer, {{today | date:'fullDate'}}

+

The time is {{today | date:'jmZ'}}

+
` +}) +export class DatePipeExample { + today: number = Date.now(); +} +// #enddocregion + +@Component({ + selector: 'example-app', + directives: [DatePipeExample], + template: ` +

DatePipe Example

+ + ` +}) +export class AppCmp { +} + +export function main() { + bootstrap(AppCmp); +} diff --git a/modules/angular2/examples/core/pipes/ts/date_pipe/index.html b/modules/angular2/examples/core/pipes/ts/date_pipe/index.html new file mode 100644 index 0000000000..43ccdf1337 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/date_pipe/index.html @@ -0,0 +1,24 @@ + + + + DatePipe Example + + + + + + + + + + + Loading... + + + + diff --git a/modules/angular2/examples/core/pipes/ts/json_pipe/index.html b/modules/angular2/examples/core/pipes/ts/json_pipe/index.html new file mode 100644 index 0000000000..4d4ece7ab1 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/json_pipe/index.html @@ -0,0 +1,24 @@ + + + + JsonPipe Example + + + + + + + + + + + Loading... + + + + diff --git a/modules/angular2/examples/core/pipes/ts/json_pipe/json_pipe_example.ts b/modules/angular2/examples/core/pipes/ts/json_pipe/json_pipe_example.ts new file mode 100644 index 0000000000..4bb4414383 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/json_pipe/json_pipe_example.ts @@ -0,0 +1,32 @@ +import {Component, provide} from 'angular2/angular2'; +import {bootstrap} from 'angular2/bootstrap'; + +// #docregion JsonPipe +@Component({ + selector: 'json-example', + template: `
+

Without JSON pipe:

+ 
{{object}}
+

With JSON pipe:

+ 
{{object | json}}
+
` +}) +export class JsonPipeExample { + object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}} +} +// #enddocregion + +@Component({ + selector: 'example-app', + directives: [JsonPipeExample], + template: ` +

JsonPipe Example

+ + ` +}) +export class AppCmp { +} + +export function main() { + bootstrap(AppCmp); +} diff --git a/modules/angular2/examples/core/pipes/ts/lowerupper_pipe/index.html b/modules/angular2/examples/core/pipes/ts/lowerupper_pipe/index.html new file mode 100644 index 0000000000..74d5242b71 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/lowerupper_pipe/index.html @@ -0,0 +1,24 @@ + + + + LowercasePipe & UppercasePipe Example + + + + + + + + + + + Loading... + + + + diff --git a/modules/angular2/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts b/modules/angular2/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts new file mode 100644 index 0000000000..a67b754e63 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts @@ -0,0 +1,32 @@ +import {Component, provide} from 'angular2/angular2'; +import {bootstrap} from 'angular2/bootstrap'; + +// #docregion LowerUpperPipe +@Component({ + selector: 'lowerupper-example', + template: `
+ +

In lowercase: 

'{{value | lowercase}}'

+

In uppercase: 

'{{value | uppercase}}'

+
` +}) +export class LowerUpperPipeExample { + value: string; + change(value) { this.value = value; } +} +// #enddocregion + +@Component({ + selector: 'example-app', + directives: [LowerUpperPipeExample], + template: ` +

LowercasePipe & UppercasePipe Example

+ + ` +}) +export class AppCmp { +} + +export function main() { + bootstrap(AppCmp); +} diff --git a/modules/angular2/examples/core/pipes/ts/number_pipe/index.html b/modules/angular2/examples/core/pipes/ts/number_pipe/index.html new file mode 100644 index 0000000000..c208aeb661 --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/number_pipe/index.html @@ -0,0 +1,24 @@ + + + + Numeric Pipe Examples + + + + + + + + + + + Loading... + + + + diff --git a/modules/angular2/examples/core/pipes/ts/number_pipe/number_pipe_example.ts b/modules/angular2/examples/core/pipes/ts/number_pipe/number_pipe_example.ts new file mode 100644 index 0000000000..3b000d8b5f --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/number_pipe/number_pipe_example.ts @@ -0,0 +1,66 @@ +import {Component, provide} from 'angular2/angular2'; +import {bootstrap} from 'angular2/bootstrap'; + +// #docregion NumberPipe +@Component({ + selector: 'number-example', + template: `
+

e (no formatting): {{e}}

+

e (3.1-5): {{e | number:'3.1-5'}}

+

pi (no formatting): {{pi}}

+

pi (3.5-5): {{pi | number:'3.5-5'}}

+
` +}) +export class NumberPipeExample { + pi: number = 3.141; + e: number = 2.718281828459045; +} +// #enddocregion + +// #docregion PercentPipe +@Component({ + selector: 'percent-example', + template: `
+

A: {{a | percent}}

+

B: {{b | percent:'4.3-5'}}

+
` +}) +export class PercentPipeExample { + a: number = 0.259; + b: number = 1.3495; +} +// #enddocregion + +// #docregion CurrencyPipe +@Component({ + selector: 'currency-example', + template: `
+

A: {{a | currency:'USD':false}}

+

B: {{b | currency:'USD':true:'4.2-2'}}

+
` +}) +export class CurrencyPipeExample { + a: number = 0.259; + b: number = 1.3495; +} +// #enddocregion + +@Component({ + selector: 'example-app', + directives: [NumberPipeExample, PercentPipeExample, CurrencyPipeExample], + template: ` +

Numeric Pipe Examples

+

NumberPipe Example

+ +

PercentPipe Example

+ +

CurrencyPipeExample

+ + ` +}) +export class AppCmp { +} + +export function main() { + bootstrap(AppCmp); +} diff --git a/modules/angular2/examples/core/pipes/ts/slice_pipe/index.html b/modules/angular2/examples/core/pipes/ts/slice_pipe/index.html new file mode 100644 index 0000000000..e77619bebf --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/slice_pipe/index.html @@ -0,0 +1,24 @@ + + + + SlicePipe Example + + + + + + + + + + + Loading... + + + + diff --git a/modules/angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts b/modules/angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts new file mode 100644 index 0000000000..65df5ca22c --- /dev/null +++ b/modules/angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts @@ -0,0 +1,47 @@ +import {Component, provide} from 'angular2/angular2'; +import {bootstrap} from 'angular2/bootstrap'; + +// #docregion SlicePipe_string +@Component({ + selector: 'slice-string-example', + template: `
+

{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'

+

{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''

+

{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'

+

{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'

+

{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'

+

{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''

+
` +}) +export class SlicePipeStringExample { + str: string = 'abcdefghij'; +} +// #enddocregion + +// #docregion SlicePipe_list +@Component({ + selector: 'slice-list-example', + template: `
+
  • {{i}}
    • +
    ` +}) +export class SlicePipeListExample { + collection: string[] = ['a', 'b', 'c', 'd']; +} +// #enddocregion + +@Component({ + selector: 'example-app', + directives: [SlicePipeListExample, SlicePipeStringExample], + template: ` +

    SlicePipe Examples

    + + + ` +}) +export class AppCmp { +} + +export function main() { + bootstrap(AppCmp); +} diff --git a/modules/angular2/src/common/pipes/async_pipe.ts b/modules/angular2/src/common/pipes/async_pipe.ts index 7a934e8992..99e7982df0 100644 --- a/modules/angular2/src/common/pipes/async_pipe.ts +++ b/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(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}) diff --git a/modules/angular2/src/common/pipes/date_pipe.ts b/modules/angular2/src/common/pipes/date_pipe.ts index 92af07a59f..72f4210026 100644 --- a/modules/angular2/src/common/pipes/date_pipe.ts +++ b/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}) diff --git a/modules/angular2/src/common/pipes/json_pipe.ts b/modules/angular2/src/common/pipes/json_pipe.ts index d6b94cbe52..2e75641c62 100644 --- a/modules/angular2/src/common/pipes/json_pipe.ts +++ b/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}) diff --git a/modules/angular2/src/common/pipes/lowercase_pipe.ts b/modules/angular2/src/common/pipes/lowercase_pipe.ts index f1b24548af..2ac96d162a 100644 --- a/modules/angular2/src/common/pipes/lowercase_pipe.ts +++ b/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'}) diff --git a/modules/angular2/src/common/pipes/number_pipe.ts b/modules/angular2/src/common/pipes/number_pipe.ts index 868db96616..d556c4639d 100644 --- a/modules/angular2/src/common/pipes/number_pipe.ts +++ b/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'}) diff --git a/modules/angular2/src/common/pipes/slice_pipe.ts b/modules/angular2/src/common/pipes/slice_pipe.ts index a2347909ec..887232901e 100644 --- a/modules/angular2/src/common/pipes/slice_pipe.ts +++ b/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: * - *
  • {{i}}
    • + * {@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}) diff --git a/modules/angular2/src/common/pipes/uppercase_pipe.ts b/modules/angular2/src/common/pipes/uppercase_pipe.ts index c2b733566f..ae62c07c62 100644 --- a/modules/angular2/src/common/pipes/uppercase_pipe.ts +++ b/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'})