From 2c42a50fc3b7b44460b3345b492400260740520a Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Thu, 8 Sep 2016 21:41:09 -0700 Subject: [PATCH] docs(pipes): updated pipe documentation --- .../@angular/common/src/pipes/async_pipe.ts | 20 +++-- .../@angular/common/src/pipes/date_pipe.ts | 53 +++++++------ .../common/src/pipes/i18n_plural_pipe.ts | 38 +++------- .../common/src/pipes/i18n_select_pipe.ts | 29 ++----- .../@angular/common/src/pipes/json_pipe.ts | 9 ++- .../common/src/pipes/lowercase_pipe.ts | 9 ++- .../@angular/common/src/pipes/number_pipe.ts | 75 +++++++++---------- .../@angular/common/src/pipes/slice_pipe.ts | 53 ++++++------- .../common/src/pipes/uppercase_pipe.ts | 9 ++- .../examples/common/pipes/ts/async_pipe.ts | 31 ++++++-- .../examples/common/pipes/ts/date_pipe.ts | 22 +----- .../common/pipes/ts/e2e_test/pipe_spec.ts | 43 +++++++++++ .../examples/common/pipes/ts/i18n_pipe.ts | 34 +++++++++ .../examples/common/pipes/ts/json_pipe.ts | 22 +----- .../common/pipes/ts/lowerupper_pipe.ts | 26 +------ .../examples/common/pipes/ts/module.ts | 66 ++++++++++++++++ .../examples/common/pipes/ts/number_pipe.ts | 37 ++------- .../examples/common/pipes/ts/slice_pipe.ts | 33 ++------ .../ts/dsl/e2e_test/animation_example_spec.ts | 2 +- modules/@angular/examples/tsconfig-build.json | 2 +- 20 files changed, 321 insertions(+), 292 deletions(-) create mode 100644 modules/@angular/examples/common/pipes/ts/e2e_test/pipe_spec.ts create mode 100644 modules/@angular/examples/common/pipes/ts/i18n_pipe.ts create mode 100644 modules/@angular/examples/common/pipes/ts/module.ts diff --git a/modules/@angular/common/src/pipes/async_pipe.ts b/modules/@angular/common/src/pipes/async_pipe.ts index 7598729f2a..bd0db25ccb 100644 --- a/modules/@angular/common/src/pipes/async_pipe.ts +++ b/modules/@angular/common/src/pipes/async_pipe.ts @@ -42,29 +42,27 @@ var _observableStrategy = new ObservableStrategy(); var __unused: Promise; // avoid unused import when Promise union types are erased /** + * @ngModule CommonModule + * @whatItDoes Unwraps a value from an asynchronous primitive. + * @howToUse `observable_or_promise_expression | async` + * @description * The `async` pipe subscribes to an `Observable` or `Promise` and returns the latest value it has - * emitted. - * When a new value is emitted, the `async` pipe marks the component to be checked for changes. - * When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid + * emitted. When a new value is emitted, the `async` pipe marks the component to be checked for + * changes. When the component gets destroyed, the `async` pipe unsubscribes automatically to avoid * potential memory leaks. * - * ## Usage - * - * object | async - * - * where `object` is of type `Observable` or of type `Promise`. * * ## Examples * * 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='AsyncPipePromise'} + * {@example common/pipes/ts/async_pipe.ts region='AsyncPipePromise'} * * 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. + * to the view. The Observable continuesly updates the view with the current time. * - * {@example core/pipes/ts/async_pipe/async_pipe_example.ts region='AsyncPipeObservable'} + * {@example common/pipes/ts/async_pipe.ts region='AsyncPipeObservable'} * * @stable */ diff --git a/modules/@angular/common/src/pipes/date_pipe.ts b/modules/@angular/common/src/pipes/date_pipe.ts index 248931ae5c..93421c6071 100644 --- a/modules/@angular/common/src/pipes/date_pipe.ts +++ b/modules/@angular/common/src/pipes/date_pipe.ts @@ -15,23 +15,25 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; /** - * Formats a date value to a string based on the requested format. + * @ngModule CommonModule + * @whatItDoes Formats a date according to locale rules. + * @howToUse `date_expression | date[:format]` + * @description * - * WARNINGS: - * - this pipe is marked as pure hence it will not be re-evaluated when the input is mutated. - * Instead users should treat the date as an immutable object and change the reference when the - * pipe needs to re-run (this is to avoid reformatting the date on every change detection run - * which would be an expensive operation). - * - this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera - * browsers. + * Where: + * - `expression` is a date object or a number (milliseconds since UTC epoch) or an ISO string + * (https://www.w3.org/TR/NOTE-datetime). + * - `format` indicates which date/time components to include. The format can be predifined as + * shown below or custom as shown in the table. + * - `'medium'`: equivalent to `'yMMMdjms'` (e.g. `Sep 3, 2010, 12:05:08 PM` for `en-US`) + * - `'short'`: equivalent to `'yMdjm'` (e.g. `9/3/2010, 12:05 PM` for `en-US`) + * - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. `Friday, September 3, 2010` for `en-US`) + * - `'longDate'`: equivalent to `'yMMMMd'` (e.g. `September 3, 2010` for `en-US`) + * - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. `Sep 3, 2010` for `en-US`) + * - `'shortDate'`: equivalent to `'yMd'` (e.g. `9/3/2010` for `en-US`) + * - `'mediumTime'`: equivalent to `'jms'` (e.g. `12:05:08 PM` for `en-US`) + * - `'shortTime'`: equivalent to `'jm'` (e.g. `12:05 PM` for `en-US`) * - * ## Usage - * - * expression | date[:format] - * - * where `expression` is a date object or a number (milliseconds since UTC epoch) or an ISO string - * (https://www.w3.org/TR/NOTE-datetime) and `format` indicates which date/time components to - * include: * * | Component | Symbol | Short Form | Long Form | Numeric | 2-digit | * |-----------|:------:|--------------|-------------------|-----------|-----------| @@ -52,19 +54,16 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; * In javascript, only the components specified will be respected (not the ordering, * punctuations, ...) and details of the formatting will be dependent on the locale. * - * `format` can also be one of the following predefined formats: - * - * - `'medium'`: equivalent to `'yMMMdjms'` (e.g. Sep 3, 2010, 12:05:08 PM for en-US) - * - `'short'`: equivalent to `'yMdjm'` (e.g. 9/3/2010, 12:05 PM for en-US) - * - `'fullDate'`: equivalent to `'yMMMMEEEEd'` (e.g. Friday, September 3, 2010 for en-US) - * - `'longDate'`: equivalent to `'yMMMMd'` (e.g. September 3, 2010 for en-US) - * - `'mediumDate'`: equivalent to `'yMMMd'` (e.g. Sep 3, 2010 for en-US) - * - `'shortDate'`: equivalent to `'yMd'` (e.g. 9/3/2010 for en-US) - * - `'mediumTime'`: equivalent to `'jms'` (e.g. 12:05:08 PM for en-US) - * - `'shortTime'`: equivalent to `'jm'` (e.g. 12:05 PM for en-US) - * * Timezone of the formatted text will be the local system timezone of the end-user's machine. * + * WARNINGS: + * - this pipe is marked as pure hence it will not be re-evaluated when the input is mutated. + * Instead users should treat the date as an immutable object and change the reference when the + * pipe needs to re-run (this is to avoid reformatting the date on every change detection run + * which would be an expensive operation). + * - this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and Opera + * browsers. + * * ### Examples * * Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11) @@ -77,7 +76,7 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; * {{ dateObj | date:'mmss' }} // output is '43:11' * ``` * - * {@example core/pipes/ts/date_pipe/date_pipe_example.ts region='DatePipe'} + * {@example common/pipes/ts/date_pipe.ts region='DatePipe'} * * @stable */ diff --git a/modules/@angular/common/src/pipes/i18n_plural_pipe.ts b/modules/@angular/common/src/pipes/i18n_plural_pipe.ts index 3e51328285..35240036b1 100644 --- a/modules/@angular/common/src/pipes/i18n_plural_pipe.ts +++ b/modules/@angular/common/src/pipes/i18n_plural_pipe.ts @@ -14,39 +14,19 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; const _INTERPOLATION_REGEXP: RegExp = /#/g; /** - * Maps a value to a string that pluralizes the value properly. + * @ngModule CommonModule + * @whatItDoes Maps a value to a string that pluralizes the value according to locale rules. + * @howToUse `expression | i18nPlural:mapping` + * @description * - * ## Usage - * - * expression | i18nPlural:mapping - * - * where `expression` is a number and `mapping` is an object that mimics the ICU format, - * see http://userguide.icu-project.org/formatparse/messages + * Where: + * - `expression` is a number. + * - `mapping` is an object that mimics the ICU format, see + * http://userguide.icu-project.org/formatparse/messages * * ## Example * - * ``` - * @Component({ - * selector: 'app', - * template: ` - *
- * {{ messages.length | i18nPlural: messageMapping }} - *
- * `, - * // best practice is to define the locale at the application level - * providers: [{provide: LOCALE_ID, useValue: 'en_US'}] - * }) - * - * class MyApp { - * messages: any[]; - * messageMapping: {[k:string]: string} = { - * '=0': 'No messages.', - * '=1': 'One message.', - * 'other': '# messages.' - * } - * ... - * } - * ``` + * {@example common/pipes/ts/i18n_pipe.ts region='I18nPluralPipeComponent'} * * @experimental */ diff --git a/modules/@angular/common/src/pipes/i18n_select_pipe.ts b/modules/@angular/common/src/pipes/i18n_select_pipe.ts index deeaf4615e..587b189b46 100644 --- a/modules/@angular/common/src/pipes/i18n_select_pipe.ts +++ b/modules/@angular/common/src/pipes/i18n_select_pipe.ts @@ -11,33 +11,18 @@ import {isBlank, isStringMap} from '../facade/lang'; import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; /** + * @ngModule CommonModule + * @whatItDoes Generic selector that displays the string that matches the current value. + * @howToUse `expression | i18nSelect:mapping` + * @description * - * Generic selector that displays the string that matches the current value. - * - * ## Usage - * - * expression | i18nSelect:mapping - * - * where `mapping` is an object that indicates the text that should be displayed + * Where: + * - `mapping`: is an object that indicates the text that should be displayed * for different values of the provided `expression`. * * ## Example * - * ``` - *
- * {{ gender | i18nSelect: inviteMap }} - *
- * - * class MyApp { - * gender: string = 'male'; - * inviteMap: any = { - * 'male': 'Invite him.', - * 'female': 'Invite her.', - * 'other': 'Invite them.' - * } - * ... - * } - * ``` + * {@example common/pipes/ts/i18n_pipe.ts region='I18nSelectPipeComponent'} * * @experimental */ diff --git a/modules/@angular/common/src/pipes/json_pipe.ts b/modules/@angular/common/src/pipes/json_pipe.ts index 16f423c8c9..2f705f6792 100644 --- a/modules/@angular/common/src/pipes/json_pipe.ts +++ b/modules/@angular/common/src/pipes/json_pipe.ts @@ -13,10 +13,15 @@ import {Json} from '../facade/lang'; /** - * Transforms any input value using `JSON.stringify`. Useful for debugging. + * @ngModule CommonModule + * @whatItDoes Converts value into JSON string. + * @howToUse `expression | json` + * @description + * + * Converts value into string using `JSON.stringify`. Useful for debugging. * * ### Example - * {@example core/pipes/ts/json_pipe/json_pipe_example.ts region='JsonPipe'} + * {@example common/pipes/ts/json_pipe.ts region='JsonPipe'} * * @stable */ diff --git a/modules/@angular/common/src/pipes/lowercase_pipe.ts b/modules/@angular/common/src/pipes/lowercase_pipe.ts index e56452d5b0..9555cf50f3 100644 --- a/modules/@angular/common/src/pipes/lowercase_pipe.ts +++ b/modules/@angular/common/src/pipes/lowercase_pipe.ts @@ -12,11 +12,16 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; /** - * Transforms text to lowercase. + * @ngModule CommonModule + * @whatItDoes Transforms string to lowercase. + * @howToUse `expression | lowercase` + * @description + * + * Converts value into lowercase string using `String.prototype.toLowerCase()`. * * ### Example * - * {@example core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts region='LowerUpperPipe'} + * {@example common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe'} * * @stable */ diff --git a/modules/@angular/common/src/pipes/number_pipe.ts b/modules/@angular/common/src/pipes/number_pipe.ts index 90ec1edeb2..dcfd9f380b 100644 --- a/modules/@angular/common/src/pipes/number_pipe.ts +++ b/modules/@angular/common/src/pipes/number_pipe.ts @@ -59,31 +59,29 @@ function formatNumber( } /** - * WARNING: this pipe uses the Internationalization API. - * Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use a - * polyfill, for example: [https://github.com/andyearnshaw/Intl.js/]. + * @ngModule CommonModule + * @whatItDoes Formats a number according to locale rules. + * @howToUse `number_expression | number[:digitInfo]` * - * Formats a number as local text. i.e. group sizing and separator and other locale-specific + * Formats a number as text. Group sizing and separator and other locale-specific * configurations are based on the active locale. * - * ### Usage - * - * expression | number[:digitInfo] - * - * where `expression` is a number and `digitInfo` has the following format: - * - * {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} - * - * - minIntegerDigits is the minimum number of integer digits to use. Defaults to 1. - * - minFractionDigits is the minimum number of digits after fraction. Defaults to 0. - * - maxFractionDigits is the maximum number of digits after fraction. Defaults to 3. + * where `expression` is a number: + * - `digitInfo` is a `string` which has a following format:
+ * {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} + * - `minIntegerDigits` is the minimum number of integer digits to use. Defaults to `1`. + * - `minFractionDigits` is the minimum number of digits after fraction. Defaults to `0`. + * - `maxFractionDigits` is the maximum number of digits after fraction. Defaults to `3`. * * For more information on the acceptable range for each of these numbers and other * details see your native internationalization library. * + * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers + * and may require a polyfill. See {@linkDocs guide/browser-support} for details. + * * ### Example * - * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='NumberPipe'} + * {@example common/pipes/ts/number_pipe.ts region='NumberPipe'} * * @stable */ @@ -97,21 +95,22 @@ export class DecimalPipe implements PipeTransform { } /** - * WARNING: this pipe uses the Internationalization API. - * Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use a - * polyfill, for example: [https://github.com/andyearnshaw/Intl.js/]. + * @ngModule CommonModule + * @whatItDoes Formats a number as a percentage according to locale rules. + * @howToUse `number_expression | percent[:digitInfo]` * - * Formats a number as local percent. + * @description * - * ### Usage + * Formats a number as percentage. * - * expression | percent[:digitInfo] + * - `digitInfo` See {@link DecimalPipe} for detailed description. * - * For more information about `digitInfo` see {@link DecimalPipe} + * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers + * and may require a polyfill. See {@linkDocs guide/browser-support} for details. * * ### Example * - * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='PercentPipe'} + * {@example common/pipes/ts/number_pipe.ts region='PercentPipe'} * * @stable */ @@ -125,26 +124,26 @@ export class PercentPipe implements PipeTransform { } /** - * WARNING: this pipe uses the Internationalization API. - * Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use a - * polyfill, for example: [https://github.com/andyearnshaw/Intl.js/]. + * @ngModule CommonModule + * @whatItDoes Formats a number as currency using locale rules. + * @howToUse `number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]` + * @description * + * Use `currency` to format a number as currency. * - * Formats a number as local currency. + * - `currencyCode` is the [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code, such + * as `USD` for the US dollar and `EUR` for the euro. + * - `symbolDisplay` is a boolean indicating whether to use the currency symbol or code. + * - `true`: use symbol (e.g. `$`). + * - `false`(default): use code (e.g. `USD`). + * - `digitInfo` See {@link DecimalPipe} for detailed description. * - * ### Usage - * - * expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]] - * - * where `currencyCode` is the ISO 4217 currency code, such as "USD" for the US dollar and - * "EUR" for the euro. `symbolDisplay` is a boolean indicating whether to use the currency - * 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}. + * WARNING: this pipe uses the Internationalization API which is not yet available in all browsers + * and may require a polyfill. See {@linkDocs guide/browser-support} for details. * * ### Example * - * {@example core/pipes/ts/number_pipe/number_pipe_example.ts region='CurrencyPipe'} + * {@example common/pipes/ts/number_pipe.ts region='CurrencyPipe'} * * @stable */ diff --git a/modules/@angular/common/src/pipes/slice_pipe.ts b/modules/@angular/common/src/pipes/slice_pipe.ts index e1bde8030c..2f2fc429d1 100644 --- a/modules/@angular/common/src/pipes/slice_pipe.ts +++ b/modules/@angular/common/src/pipes/slice_pipe.ts @@ -12,48 +12,37 @@ import {StringWrapper, isArray, isBlank, isString} from '../facade/lang'; import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; /** - * Creates a new List or String containing only a subset (slice) of the - * elements. + * @ngModule CommonModule + * @whatItDoes Creates a new List or String containing a subset (slice) of the elements. + * @howToUse `array_or_string_expression | slice:start[:end]` + * @description * - * The starting index of the subset to return is specified by the `start` parameter. + * Where the input expression is a `List` or `String`, and: + * - `start`: The starting index of the subset to return. + * - **a positive integer**: return the item at `start` index and all items after + * in the list or string expression. + * - **a negative integer**: return the item at `start` index from the end and all items after + * in the list or string expression. + * - **if positive and greater than the size of the expression**: return an empty list or string. + * - **if negative and greater than the size of the expression**: return entire list or string. + * - `end`: The ending index of the subset to return. + * - **omitted**: return all items until the end. + * - **if positive**: return all items before `end` index of the list or string. + * - **if negative**: return all items before `end` index from the end of the list or string. * - * The ending index of the subset to return is specified by the optional `end` parameter. - * - * ### Usage - * - * expression | slice:start[:end] - * - * All behavior is based on the expected behavior of the JavaScript API - * Array.prototype.slice() and String.prototype.slice() - * - * Where the input expression is a [List] or [String], and `start` is: - * - * - **a positive integer**: return the item at _start_ index and all items after - * in the list or string expression. - * - **a negative integer**: return the item at _start_ index from the end and all items after - * in the list or string expression. - * - **`|start|` greater than the size of the expression**: return an empty list or string. - * - **`|start|` negative greater than the size of the expression**: return entire list or - * string expression. - * - * and where `end` is: - * - * - **omitted**: return all items until the end of the input - * - **a positive integer**: return all items before _end_ index of the list or string - * expression. - * - **a negative integer**: return all items before _end_ index from the end of the list - * or string expression. + * All behavior is based on the expected behavior of the JavaScript API `Array.prototype.slice()` + * and `String.prototype.slice()`. * * When operating on a [List], the returned list is always a copy even when all * the elements are being returned. * - * When operating on a blank value, returns it. + * When operating on a blank value, the pipe returns the blank value. * * ## List Example * * This `ngFor` example: * - * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_list'} + * {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_list'} * * produces the following: * @@ -62,7 +51,7 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; * * ## String Examples * - * {@example core/pipes/ts/slice_pipe/slice_pipe_example.ts region='SlicePipe_string'} + * {@example common/pipes/ts/slice_pipe.ts region='SlicePipe_string'} * * @stable */ diff --git a/modules/@angular/common/src/pipes/uppercase_pipe.ts b/modules/@angular/common/src/pipes/uppercase_pipe.ts index d4966c4612..0ea1b2523e 100644 --- a/modules/@angular/common/src/pipes/uppercase_pipe.ts +++ b/modules/@angular/common/src/pipes/uppercase_pipe.ts @@ -11,11 +11,16 @@ import {isBlank, isString} from '../facade/lang'; import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; /** - * Implements uppercase transforms to text. + * @ngModule CommonModule + * @whatItDoes Transforms string to uppercase. + * @howToUse `expression | uppercase` + * @description + * + * Converts value into lowercase string using `String.prototype.toUpperCase()`. * * ### Example * - * {@example core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts region='LowerUpperPipe'} + * {@example common/pipes/ts/lowerupper_pipe.ts region='LowerUpperPipe'} * * @stable */ diff --git a/modules/@angular/examples/common/pipes/ts/async_pipe.ts b/modules/@angular/examples/common/pipes/ts/async_pipe.ts index 6463e4c10b..d746d9ac8c 100644 --- a/modules/@angular/examples/common/pipes/ts/async_pipe.ts +++ b/modules/@angular/examples/common/pipes/ts/async_pipe.ts @@ -14,13 +14,14 @@ import {Subscriber} from 'rxjs/Subscriber'; // #docregion AsyncPipePromise @Component({ - selector: 'async-promise', + selector: 'async-promise-pipe', template: `
-

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

+ promise|async: + Wait for it... {{ greeting | async }}
` }) -export class AsyncPromiseComponent { +export class AsyncPromisePipeComponent { greeting: Promise = null; arrived: boolean = false; @@ -45,10 +46,26 @@ export class AsyncPromiseComponent { // #enddocregion // #docregion AsyncPipeObservable -@Component({selector: 'async-observable', template: '
Time: {{ time | async }}
'}) -export class AsyncObservableComponent { - time = new Observable((observer: Subscriber) => { - setInterval(() => observer.next(new Date().getTime()), 500); +@Component({ + selector: 'async-observable-pipe', + template: '
observable|async: Time: {{ time | async }}
' +}) +export class AsyncObservablePipeComponent { + time = new Observable((observer: Subscriber) => { + setInterval(() => observer.next(new Date().toString()), 1000); }); } // #enddocregion + +// For some reason protractor hangs on setInterval. So we will run outside of angular zone so that +// protractor will not see us. Also we want to have this outside the docregion so as not to confuse +// the reader. +function setInterval(fn: Function, delay: number) { + var zone = Zone.current; + var rootZone = zone; + while (rootZone.parent) { + rootZone = rootZone.parent; + } + rootZone.run( + () => { window.setInterval(function() { zone.run(fn, this, arguments as any); }, delay); }); +} diff --git a/modules/@angular/examples/common/pipes/ts/date_pipe.ts b/modules/@angular/examples/common/pipes/ts/date_pipe.ts index 57ee317b3a..81872b4ea3 100644 --- a/modules/@angular/examples/common/pipes/ts/date_pipe.ts +++ b/modules/@angular/examples/common/pipes/ts/date_pipe.ts @@ -12,32 +12,14 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; // #docregion DatePipe @Component({ - selector: 'date-example', + selector: 'date-pipe', template: `

Today is {{today | date}}

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

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

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

DatePipe Example

- - ` -}) -export class AppCmp { -} - -@NgModule({declarations: [DatePipeExample, AppCmp], imports: [BrowserModule], bootstrap: [AppCmp]}) -class AppModule { -} - -export function main() { - platformBrowserDynamic().bootstrapModule(AppModule); -} diff --git a/modules/@angular/examples/common/pipes/ts/e2e_test/pipe_spec.ts b/modules/@angular/examples/common/pipes/ts/e2e_test/pipe_spec.ts new file mode 100644 index 0000000000..d4d4f36c65 --- /dev/null +++ b/modules/@angular/examples/common/pipes/ts/e2e_test/pipe_spec.ts @@ -0,0 +1,43 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {verifyNoBrowserErrors} from '../../../../_common/e2e_util'; + +function waitForElement(selector: string) { + var EC = (protractor).ExpectedConditions; + // Waits for the element with id 'abc' to be present on the dom. + browser.wait(EC.presenceOf($(selector)), 20000); +} + +describe('pipe', () => { + afterEach(verifyNoBrowserErrors); + + describe('async', () => { + var URL = '/common/pipes/ts/'; + + it('should resolve and display promise', () => { + browser.get(URL); + waitForElement('async-promise-pipe'); + expect(element.all(by.css('async-promise-pipe span')).get(0).getText()) + .toEqual('Wait for it...'); + element(by.css('async-promise-pipe button')).click(); + expect(element.all(by.css('async-promise-pipe span')).get(0).getText()) + .toEqual('Wait for it... hi there!'); + }); + + it('should update lowercase/uppercase', () => { + browser.get(URL); + waitForElement('lowerupper-pipe'); + element(by.css('lowerupper-pipe input')).sendKeys('Hello World!'); + expect(element.all(by.css('lowerupper-pipe pre')).get(0).getText()) + .toEqual('\'hello world!\''); + expect(element.all(by.css('lowerupper-pipe pre')).get(1).getText()) + .toEqual('\'HELLO WORLD!\''); + }); + }); +}); diff --git a/modules/@angular/examples/common/pipes/ts/i18n_pipe.ts b/modules/@angular/examples/common/pipes/ts/i18n_pipe.ts new file mode 100644 index 0000000000..8b73d0d6ad --- /dev/null +++ b/modules/@angular/examples/common/pipes/ts/i18n_pipe.ts @@ -0,0 +1,34 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Component, NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {Observable} from 'rxjs/Observable'; +import {Subscriber} from 'rxjs/Subscriber'; + +// #docregion I18nPluralPipeComponent +@Component({ + selector: 'i18n-plural-pipe', + template: `
{{ messages.length | i18nPlural: messageMapping }}
` +}) +export class I18nPluralPipeComponent { + messages: any[] = ['Message 1']; + messageMapping: + {[k: string]: string} = {'=0': 'No messages.', '=1': 'One message.', 'other': '# messages.'}; +} +// #enddocregion + +// #docregion I18nSelectPipeComponent +@Component( + {selector: 'i18n-select-pipe', template: `
{{gender | i18nSelect: inviteMap}}
`}) +export class I18nSelectPipeComponent { + gender: string = 'male'; + inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'}; +} +//#enddocregion diff --git a/modules/@angular/examples/common/pipes/ts/json_pipe.ts b/modules/@angular/examples/common/pipes/ts/json_pipe.ts index 23621f8338..fab6b4b060 100644 --- a/modules/@angular/examples/common/pipes/ts/json_pipe.ts +++ b/modules/@angular/examples/common/pipes/ts/json_pipe.ts @@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; // #docregion JsonPipe @Component({ - selector: 'json-example', + selector: 'json-pipe', template: `

Without JSON pipe:

{{object}}
@@ -20,25 +20,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
{{object | json}}
` }) -export class JsonPipeExample { +export class JsonPipeComponent { object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}}; } // #enddocregion - -@Component({ - selector: 'example-app', - template: ` -

JsonPipe Example

- - ` -}) -export class AppCmp { -} - -@NgModule({imports: [BrowserModule], bootstrap: [AppCmp], declarations: [AppCmp, JsonPipeExample]}) -class AppModule { -} - -export function main() { - platformBrowserDynamic().bootstrapModule(AppModule); -} diff --git a/modules/@angular/examples/common/pipes/ts/lowerupper_pipe.ts b/modules/@angular/examples/common/pipes/ts/lowerupper_pipe.ts index a546fc5fc9..cf6b4ffb42 100644 --- a/modules/@angular/examples/common/pipes/ts/lowerupper_pipe.ts +++ b/modules/@angular/examples/common/pipes/ts/lowerupper_pipe.ts @@ -12,33 +12,15 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; // #docregion LowerUpperPipe @Component({ - selector: 'lowerupper-example', + selector: 'lowerupper-pipe', template: `
-

In lowercase: 

'{{value | lowercase}}'

-

In uppercase: 

'{{value | uppercase}}'

+

In lowercase: 

'{{value | lowercase}}'
+

In uppercase: 

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

LowercasePipe & UppercasePipe Example

- - ` -}) -export class AppCmp { -} - -@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) -class AppModule { -} - -export function main() { - platformBrowserDynamic().bootstrapModule(AppModule); -} diff --git a/modules/@angular/examples/common/pipes/ts/module.ts b/modules/@angular/examples/common/pipes/ts/module.ts new file mode 100644 index 0000000000..00597d68e8 --- /dev/null +++ b/modules/@angular/examples/common/pipes/ts/module.ts @@ -0,0 +1,66 @@ +/** + * @license + * Copyright Google Inc. All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {Component, NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; + +import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe'; +import {DatePipeComponent} from './date_pipe'; +import {I18nPluralPipeComponent, I18nSelectPipeComponent} from './i18n_pipe'; +import {JsonPipeComponent} from './json_pipe'; +import {LowerUpperPipeComponent} from './lowerupper_pipe'; +import {CurrencyPipeComponent, NumberPipeComponent, PercentPipeComponent} from './number_pipe'; +import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe'; + +@Component({ + selector: 'example-app', + template: ` +

Pipe Example

+ +

async

+ + + +

date

+ + +

json

+ + +

lower, upper

+ + +

number

+ + + + +

slice

+ + + +

i18n

+ + + ` +}) +export class ExampleAppComponent { +} + +@NgModule({ + declarations: [ + AsyncPromisePipeComponent, AsyncObservablePipeComponent, ExampleAppComponent, JsonPipeComponent, + DatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent, PercentPipeComponent, + CurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent, + I18nPluralPipeComponent, I18nSelectPipeComponent + ], + imports: [BrowserModule], + bootstrap: [ExampleAppComponent] +}) +export class AppModule { +} diff --git a/modules/@angular/examples/common/pipes/ts/number_pipe.ts b/modules/@angular/examples/common/pipes/ts/number_pipe.ts index 4f07f0cc64..ba8612a4c3 100644 --- a/modules/@angular/examples/common/pipes/ts/number_pipe.ts +++ b/modules/@angular/examples/common/pipes/ts/number_pipe.ts @@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; // #docregion NumberPipe @Component({ - selector: 'number-example', + selector: 'number-pipe', template: `

e (no formatting): {{e}}

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

@@ -20,21 +20,21 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

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

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

A: {{a | percent}}

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

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

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

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

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

Numeric Pipe Examples

-

NumberPipe Example

- -

PercentPipe Example

- -

CurrencyPipeExample

- - ` -}) -export class AppCmp { -} - -@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) -class AppModule { -} - -export function main() { - platformBrowserDynamic().bootstrapModule(AppModule); -} diff --git a/modules/@angular/examples/common/pipes/ts/slice_pipe.ts b/modules/@angular/examples/common/pipes/ts/slice_pipe.ts index bedc3cf025..b43ab58e73 100644 --- a/modules/@angular/examples/common/pipes/ts/slice_pipe.ts +++ b/modules/@angular/examples/common/pipes/ts/slice_pipe.ts @@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; // #docregion SlicePipe_string @Component({ - selector: 'slice-string-example', + selector: 'slice-string-pipe', 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 ''

@@ -22,38 +22,19 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

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

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

    SlicePipe Examples

    - - - ` -}) -export class AppCmp { -} - -@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]}) -class AppModule { -} - -export function main() { - platformBrowserDynamic().bootstrapModule(AppModule); -} diff --git a/modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts b/modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts index 351dcb7591..610bc473b8 100644 --- a/modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts +++ b/modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts @@ -18,7 +18,7 @@ describe('animation example', () => { afterEach(verifyNoBrowserErrors); describe('index view', () => { - var URL = '/core/animation/ts/dsl/index.html'; + var URL = '/core/animation/ts/dsl/'; it('should list out the current collection of items', () => { browser.get(URL); diff --git a/modules/@angular/examples/tsconfig-build.json b/modules/@angular/examples/tsconfig-build.json index 770b08512b..a6cd3595e5 100644 --- a/modules/@angular/examples/tsconfig-build.json +++ b/modules/@angular/examples/tsconfig-build.json @@ -25,8 +25,8 @@ "./**/module.ts", "./**/test/*.ts", "./**/e2e_test/*.ts", - "../../../node_modules/zone.js/dist/zone.js.d.ts", "../../system.d.ts", + "../../../node_modules/zone.js/dist/zone.js.d.ts", // TODO(i): we can't use protractor's built-in typings because they contain lots of ambient definitions "../../../node_modules/@types/protractor/index.d.ts" ]