honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(pipes): updated pipe documentation

This commit is contained in:
Misko Hevery 2016-09-08 21:41:09 -07:00 committed by Igor Minar
parent caa1cd2470
commit 2c42a50fc3
20 changed files with 321 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
modules/@angular/common/src/pipes/async_pipe.ts
View File

@ -42,29 +42,27 @@ var _observableStrategy = new ObservableStrategy();
var __unused: Promise<any>; // 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
*/

53
modules/@angular/common/src/pipes/date_pipe.ts
View File

@ -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
*/

38
modules/@angular/common/src/pipes/i18n_plural_pipe.ts
View File

@ -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: `
* <div>
* {{ messages.length | i18nPlural: messageMapping }}
* </div>
* `,
* // 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
*/

29
modules/@angular/common/src/pipes/i18n_select_pipe.ts
View File

@ -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
*
* ```
* <div>
* {{ gender | i18nSelect: inviteMap }}
* </div>
*
* 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
*/

9
modules/@angular/common/src/pipes/json_pipe.ts
View File

@ -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
*/

9
modules/@angular/common/src/pipes/lowercase_pipe.ts
View File

@ -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
*/

75
modules/@angular/common/src/pipes/number_pipe.ts
View File

@ -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: <br>
* <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>
* - `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
*/

53
modules/@angular/common/src/pipes/slice_pipe.ts
View File

@ -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
*/

9
modules/@angular/common/src/pipes/uppercase_pipe.ts
View File

@ -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
*/

31
modules/@angular/examples/common/pipes/ts/async_pipe.ts
View File

@ -14,13 +14,14 @@ import {Subscriber} from 'rxjs/Subscriber';
// #docregion AsyncPipePromise
@Component({
selector: 'async-promise',
selector: 'async-promise-pipe',
template: `<div>
<p>Wait for it... {{ greeting | async }}</p>
<code>promise|async</code>:
<button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
<span>Wait for it... {{ greeting | async }}</span>
</div>`
})
export class AsyncPromiseComponent {
export class AsyncPromisePipeComponent {
greeting: Promise<string> = null;
arrived: boolean = false;
@ -45,10 +46,26 @@ export class AsyncPromiseComponent {
// #enddocregion
// #docregion AsyncPipeObservable
@Component({selector: 'async-observable', template: '<div>Time: {{ time | async }}</div>'})
export class AsyncObservableComponent {
time = new Observable<number>((observer: Subscriber<number>) => {
setInterval(() => observer.next(new Date().getTime()), 500);
@Component({
selector: 'async-observable-pipe',
template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
time = new Observable<string>((observer: Subscriber<string>) => {
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); });
}

22
modules/@angular/examples/common/pipes/ts/date_pipe.ts
View File

@ -12,32 +12,14 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// #docregion DatePipe
@Component({
selector: 'date-example',
selector: 'date-pipe',
template: `<div>
<p>Today is {{today | date}}</p>
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
<p>The time is {{today | date:'jmZ'}}</p>
</div>`
})
export class DatePipeExample {
export class DatePipeComponent {
today: number = Date.now();
}
// #enddocregion
@Component({
selector: 'example-app',
template: `
<h1>DatePipe Example</h1>
<date-example></date-example>
`
})
export class AppCmp {
}
@NgModule({declarations: [DatePipeExample, AppCmp], imports: [BrowserModule], bootstrap: [AppCmp]})
class AppModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(AppModule);
}

43
modules/@angular/examples/common/pipes/ts/e2e_test/pipe_spec.ts Normal file
View File

@ -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 = (<any>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!\'');
});
});
});

34
modules/@angular/examples/common/pipes/ts/i18n_pipe.ts Normal file
View File

@ -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: `<div>{{ messages.length | i18nPlural: messageMapping }}</div>`
})
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: `<div>{{gender | i18nSelect: inviteMap}} </div>`})
export class I18nSelectPipeComponent {
gender: string = 'male';
inviteMap: any = {'male': 'Invite him.', 'female': 'Invite her.', 'other': 'Invite them.'};
}
//#enddocregion

22
modules/@angular/examples/common/pipes/ts/json_pipe.ts
View File

@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// #docregion JsonPipe
@Component({
selector: 'json-example',
selector: 'json-pipe',
template: `<div>
<p>Without JSON pipe:</p>
<pre>{{object}}</pre>
@ -20,25 +20,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
<pre>{{object | json}}</pre>
</div>`
})
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: `
<h1>JsonPipe Example</h1>
<json-example></json-example>
`
})
export class AppCmp {
}
@NgModule({imports: [BrowserModule], bootstrap: [AppCmp], declarations: [AppCmp, JsonPipeExample]})
class AppModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(AppModule);
}

26
modules/@angular/examples/common/pipes/ts/lowerupper_pipe.ts
View File

@ -12,33 +12,15 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// #docregion LowerUpperPipe
@Component({
selector: 'lowerupper-example',
selector: 'lowerupper-pipe',
template: `<div>
<label>Name: </label><input #name (keyup)="change(name.value)" type="text">
<p>In lowercase: <pre>'{{value | lowercase}}'</pre></p>
<p>In uppercase: <pre>'{{value | uppercase}}'</pre></p>
<p>In lowercase: <pre>'{{value | lowercase}}'</pre>
<p>In uppercase: <pre>'{{value | uppercase}}'</pre>
</div>`
})
export class LowerUpperPipeExample {
export class LowerUpperPipeComponent {
value: string;
change(value: string) { this.value = value; }
}
// #enddocregion
@Component({
selector: 'example-app',
template: `
<h1>LowercasePipe &amp; UppercasePipe Example</h1>
<lowerupper-example></lowerupper-example>
`
})
export class AppCmp {
}
@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
class AppModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(AppModule);
}

66
modules/@angular/examples/common/pipes/ts/module.ts Normal file
View File

@ -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: `
<h1>Pipe Example</h1>
<h2><code>async</code></h2>
<async-promise-pipe></async-promise-pipe>
<async-observable-pipe></async-observable-pipe>
<h2><code>date</code></h2>
<date-pipe></date-pipe>
<h2><code>json</code></h2>
<json-pipe></json-pipe>
<h2><code>lower</code>, <code>upper</code></h2>
<lowerupper-pipe></lowerupper-pipe>
<h2><code>number</code></h2>
<number-pipe></number-pipe>
<percent-pipe></percent-pipe>
<currency-pipe></currency-pipe>
<h2><code>slice</code></h2>
<slice-string-pipe></slice-string-pipe>
<slice-list-pipe></slice-list-pipe>
<h2><code>i18n</code></h2>
<i18n-plural-pipe></i18n-plural-pipe>
<i18n-select-pipe></i18n-select-pipe>
`
})
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 {
}

37
modules/@angular/examples/common/pipes/ts/number_pipe.ts
View File

@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// #docregion NumberPipe
@Component({
selector: 'number-example',
selector: 'number-pipe',
template: `<div>
<p>e (no formatting): {{e}}</p>
<p>e (3.1-5): {{e | number:'3.1-5'}}</p>
@ -20,21 +20,21 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
<p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
</div>`
})
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: `<div>
<p>A: {{a | percent}}</p>
<p>B: {{b | percent:'4.3-5'}}</p>
</div>`
})
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: `<div>
<p>A: {{a | currency:'USD':false}}</p>
<p>B: {{b | currency:'USD':true:'4.2-2'}}</p>
</div>`
})
export class CurrencyPipeExample {
export class CurrencyPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion
@Component({
selector: 'example-app',
template: `
<h1>Numeric Pipe Examples</h1>
<h2>NumberPipe Example</h2>
<number-example></number-example>
<h2>PercentPipe Example</h2>
<percent-example></percent-example>
<h2>CurrencyPipeExample</h2>
<currency-example></currency-example>
`
})
export class AppCmp {
}
@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
class AppModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(AppModule);
}

33
modules/@angular/examples/common/pipes/ts/slice_pipe.ts
View File

@ -12,7 +12,7 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// #docregion SlicePipe_string
@Component({
selector: 'slice-string-example',
selector: 'slice-string-pipe',
template: `<div>
<p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
<p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
@ -22,38 +22,19 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
<p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
</div>`
})
export class SlicePipeStringExample {
export class SlicePipeStringComponent {
str: string = 'abcdefghij';
}
// #enddocregion
// #docregion SlicePipe_list
@Component({
selector: 'slice-list-example',
template: `<div>
<li *ngFor="let i of collection | slice:1:3">{{i}}</li>
</div>`
selector: 'slice-list-pipe',
template: `<ul>
<li *ngFor="let i of collection | slice:1:3">{{i}}</li>
</ul>`
})
export class SlicePipeListExample {
export class SlicePipeListComponent {
collection: string[] = ['a', 'b', 'c', 'd'];
}
// #enddocregion
@Component({
selector: 'example-app',
template: `
<h1>SlicePipe Examples</h1>
<slice-list-example></slice-list-example>
<slice-string-example></slice-string-example>
`
})
export class AppCmp {
}
@NgModule({imports: [BrowserModule], bootstrap: [AppCmp]})
class AppModule {
}
export function main() {
platformBrowserDynamic().bootstrapModule(AppModule);
}

2
modules/@angular/examples/core/animation/ts/dsl/e2e_test/animation_example_spec.ts
View File

@ -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);

2
modules/@angular/examples/tsconfig-build.json
View File

@ -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"
]