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

docs(common): add new examples for date/number pipes (#18935) 

PR Close #18935
This commit is contained in:
Olivier Combe 2017-08-29 20:10:58 +02:00 committed by Jason Aden
parent 452a7ae88b
commit 60935b29fc
10 changed files with 265 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/common/src/pipes/date_pipe.ts
View File

@ -125,13 +125,6 @@ export const ISO8601_DATE_REGEX =
* 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:'hh:mm:ss a' }} // output is '09:43:11 PM'
* ```
*
* {@example common/pipes/ts/date_pipe.ts region='DatePipe'}
*
* @stable

11
packages/common/src/pipes/deprecated/date_pipe.ts
View File

@ -66,17 +66,10 @@ import {DateFormatter} from './intl';
*
* ### Examples
*
* Assuming `dateObj` is (year: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11)
* Assuming `dateObj` is (year: 2010, month: 9, day: 3, hour: 12 PM, minute: 05, second: 08)
* 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 common/pipes/ts/date_pipe.ts region='DatePipe'}
* {@example common/pipes/ts/date_pipe.ts region='DeprecatedDatePipe'}
*
* @stable
*/

6
packages/common/src/pipes/deprecated/number_pipe.ts
View File

@ -82,7 +82,7 @@ function formatNumber(
*
* ### Example
*
* {@example common/pipes/ts/number_pipe.ts region='NumberPipe'}
* {@example common/pipes/ts/number_pipe.ts region='DeprecatedNumberPipe'}
*
* @stable
*/
@ -112,7 +112,7 @@ export class DeprecatedDecimalPipe implements PipeTransform {
*
* ### Example
*
* {@example common/pipes/ts/number_pipe.ts region='PercentPipe'}
* {@example common/pipes/ts/percent_pipe.ts region='DeprecatedPercentPipe'}
*
* @stable
*/
@ -146,7 +146,7 @@ export class DeprecatedPercentPipe implements PipeTransform {
*
* ### Example
*
* {@example common/pipes/ts/number_pipe.ts region='CurrencyPipe'}
* {@example common/pipes/ts/currency_pipe.ts region='DeprecatedCurrencyPipe'}
*
* @stable
*/

4
packages/common/src/pipes/number_pipe.ts
View File

@ -71,7 +71,7 @@ export class DecimalPipe implements PipeTransform {
*
* ### Example
*
* {@example common/pipes/ts/number_pipe.ts region='PercentPipe'}
* {@example common/pipes/ts/percent_pipe.ts region='PercentPipe'}
*
* @stable
*/
@ -117,7 +117,7 @@ export class PercentPipe implements PipeTransform {
*
* ### Example
*
* {@example common/pipes/ts/number_pipe.ts region='CurrencyPipe'}
* {@example common/pipes/ts/currency_pipe.ts region='CurrencyPipe'}
*
* @stable
*/

61
packages/examples/common/pipes/ts/currency_pipe.ts Normal file
View File

@ -0,0 +1,61 @@
/**
* @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 {registerLocaleData} from '@angular/common';
import {Component} from '@angular/core';
// we need to import data for the french locale
import localeFr from './locale-fr';
// registering french data
registerLocaleData(localeFr);
// #docregion CurrencyPipe
@Component({
selector: 'currency-pipe',
template: `<div>
<!--output '$0.259'-->
<p>A: {{a | currency}}</p>
<!--output 'CA$0.26'-->
<p>A: {{a | currency:'CAD'}}</p>
<!--output 'CAD0.26'-->
<p>A: {{a | currency:'CAD':'code'}}</p>
<!--output 'CA$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
<!--output '$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
<!--output '0 001,35 CA$'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
</div>`
})
export class CurrencyPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion
// #docregion DeprecatedCurrencyPipe
@Component({
selector: 'deprecated-currency-pipe',
template: `<div>
<!--output 'CAD0.26'-->
<p>A: {{a | currency:'CAD'}}</p>
<!--output '$0,001.35'-->
<p>B: {{b | currency:'CAD':true:'4.2-2'}}</p>
</div>`
})
export class DeprecatedCurrencyPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion

49
packages/examples/common/pipes/ts/date_pipe.ts
View File

@ -6,19 +6,64 @@
* found in the LICENSE file at https://angular.io/license
*/
import {registerLocaleData} from '@angular/common';
import {Component} from '@angular/core';
// we need to import data for the french locale
import localeFr from './locale-fr';
// registering french data
registerLocaleData(localeFr);
// #docregion DatePipe
@Component({
selector: 'date-pipe',
template: `<div>
<!--output 'Jun 15, 2015'-->
<p>Today is {{today | date}}</p>
<!--output 'Monday, June 15, 2015'-->
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
<!--output '9:43 AM'-->
<p>The time is {{today | date:'shortTime'}}</p>
<p>The custom date is {{today | date:'yyyy-mm-dd HH:mm'}}</p>
<!--output 'Monday, June 15, 2015 at 9:03:01 AM GMT+01:00' -->
<p>The full date/time is {{today | date:'full'}}</p>
<!--output 'Lundi 15 Juin 2015 à 09:03:01 GMT+01:00'-->
<p>The full date/time in french is: {{today | date:'full':'':'fr'}}</p>
<!--output '2015-06-15 05:03 PM GMT+9'-->
<p>The custom date is {{today | date:'yyyy-mm-dd HH:mm a z':'+0900'}}</p>
<!--output '2015-06-15 09:03 AM GMT+9'-->
<p>The custom date with fixed timezone is {{fixedTimezone | date:'yyyy-mm-dd HH:mm a z':'+0900'}}</p>
</div>`
})
export class DatePipeComponent {
today: number = Date.now();
today = Date.now();
fixedTimezone = '2015-06-15T09:03:01+0900';
}
// #enddocregion
// #docregion DeprecatedDatePipe
@Component({
selector: 'deprecated-date-pipe',
template: `<div>
<!--output 'Sep 3, 2010'-->
<p>Today is {{today | date}}</p>
<!--output 'Friday, September 3, 2010'-->
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
<!--output '12:05 PM'-->
<p>The time is {{today | date:'shortTime'}}</p>
<!--output '2010-09-03 12:05 PM'-->
<p>The custom date is {{today | date:'yyyy-mm-dd HH:mm a'}}</p>
</div>`
})
export class DeprecatedDatePipeComponent {
today = Date.now();
}
// #enddocregion

52
packages/examples/common/pipes/ts/locale-fr.ts Normal file
View File

@ -0,0 +1,52 @@
/**
* @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
*/
// THIS CODE IS GENERATED - DO NOT MODIFY
// See angular/tools/gulp-tasks/cldr/extract.js
export default [
'fr',
[
['AM', 'PM'],
,
],
,
[
['D', 'L', 'M', 'M', 'J', 'V', 'S'], ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
['di', 'lu', 'ma', 'me', 'je', 've', 'sa']
],
,
[
['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
[
'janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.',
'déc.'
],
[
'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre',
'octobre', 'novembre', 'décembre'
]
],
, [['av. J.-C.', 'ap. J.-C.'], , ['avant Jésus-Christ', 'après Jésus-Christ']], 1, [6, 0],
['dd/MM/y', 'd MMM y', 'd MMMM y', 'EEEE d MMMM y'],
['HH:mm', 'HH:mm:ss', 'HH:mm:ss z', 'HH:mm:ss zzzz'],
[
'{1} {0}',
'{1} \'à\' {0}',
,
],
[',', ' ', ';', '%', '+', '-', 'E', '×', '‰', '∞', 'NaN', ':'],
['#,##0.###', '#,##0 %', '#,##0.00 ¤', '#E0'], '€', 'euro', function(n: number):
number {
let i = Math.floor(Math.abs(n));
if (i === 0 || i === 1)
return 1;
return 5;
}
];

11
packages/examples/common/pipes/ts/module.ts
View File

@ -10,11 +10,13 @@ import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AsyncObservablePipeComponent, AsyncPromisePipeComponent} from './async_pipe';
import {DatePipeComponent} from './date_pipe';
import {CurrencyPipeComponent, DeprecatedCurrencyPipeComponent} from './currency_pipe';
import {DatePipeComponent, DeprecatedDatePipeComponent} 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 {DeprecatedNumberPipeComponent, NumberPipeComponent} from './number_pipe';
import {DeprecatedPercentPipeComponent, PercentPipeComponent} from './percent_pipe';
import {SlicePipeListComponent, SlicePipeStringComponent} from './slice_pipe';
@Component({
@ -55,8 +57,9 @@ export class ExampleAppComponent {
@NgModule({
declarations: [
AsyncPromisePipeComponent, AsyncObservablePipeComponent, ExampleAppComponent, JsonPipeComponent,
DatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent, PercentPipeComponent,
CurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent,
DatePipeComponent, DeprecatedDatePipeComponent, LowerUpperPipeComponent, NumberPipeComponent,
PercentPipeComponent, DeprecatedPercentPipeComponent, CurrencyPipeComponent,
DeprecatedCurrencyPipeComponent, SlicePipeStringComponent, SlicePipeListComponent,
I18nPluralPipeComponent, I18nSelectPipeComponent
],
imports: [BrowserModule],

69
packages/examples/common/pipes/ts/number_pipe.ts
View File

@ -6,11 +6,49 @@
* found in the LICENSE file at https://angular.io/license
*/
import {registerLocaleData} from '@angular/common';
import {Component} from '@angular/core';
// we need to import data for the french locale
import localeFr from './locale-fr';
// registering french data
registerLocaleData(localeFr);
// #docregion NumberPipe
@Component({
selector: 'number-pipe',
template: `<div>
<!--output '2.718'-->
<p>e (no formatting): {{e | number}}</p>
<!--output '002.71828'-->
<p>e (3.1-5): {{e | number:'3.1-5'}}</p>
<!--output '0,002.71828'-->
<p>e (3.5-5): {{e | number:'4.5-5'}}</p>
<!--output '0 002,71828'-->
<p>e (french): {{e | number:'4.5-5':'fr'}}</p>
<!--output '3.14'-->
<p>pi (no formatting): {{e | number}}</p>
<!--output '003.14'-->
<p>pi (3.1-5): {{e | number:'3.1-5'}}</p>
<!--output '003.14000'-->
<p>pi (3.5-5): {{e | number:'3.5-5'}}</p>
</div>`
})
export class NumberPipeComponent {
pi: number = 3.14;
e: number = 2.718281828459045;
}
// #enddocregion
// #docregion DeprecatedNumberPipe
@Component({
selector: 'deprecated-number-pipe',
template: `<div>
<p>e (no formatting): {{e}}</p>
<p>e (3.1-5): {{e | number:'3.1-5'}}</p>
@ -18,37 +56,8 @@ import {Component} from '@angular/core';
<p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
</div>`
})
export class NumberPipeComponent {
export class DeprecatedNumberPipeComponent {
pi: number = 3.141592;
e: number = 2.718281828459045;
}
// #enddocregion
// #docregion PercentPipe
@Component({
selector: 'percent-pipe',
template: `<div>
<p>A: {{a | percent}}</p>
<p>B: {{b | percent:'4.3-5'}}</p>
</div>`
})
export class PercentPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion
// #docregion CurrencyPipe
@Component({
selector: 'currency-pipe',
template: `<div>
<p>A: {{a | currency:'CAD'}}</p>
<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
</div>`
})
export class CurrencyPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion

52
packages/examples/common/pipes/ts/percent_pipe.ts Normal file
View File

@ -0,0 +1,52 @@
/**
* @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 {registerLocaleData} from '@angular/common';
import {Component} from '@angular/core';
// we need to import data for the french locale
import localeFr from './locale-fr';
// registering french data
registerLocaleData(localeFr);
// #docregion PercentPipe
@Component({
selector: 'percent-pipe',
template: `<div>
<!--output '26%'-->
<p>A: {{a | percent}}</p>
<!--output '0,134.950%'-->
<p>B: {{b | percent:'4.3-5'}}</p>
<!--output '0 134,950 %'-->
<p>B: {{b | percent:'4.3-5':'fr'}}</p>
</div>`
})
export class PercentPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion
// #docregion DeprecatedPercentPipe
@Component({
selector: 'deprecated-percent-pipe',
template: `<div>
<!--output '25.9%'-->
<p>A: {{a | percent}}</p>
<!--output '0,134.95%'-->
<p>B: {{b | percent:'4.3-5'}}</p>
</div>`
})
export class DeprecatedPercentPipeComponent {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion