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

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

Browse Source 
Closes #5103
This commit is contained in:
Alex Rickabaugh 2015-11-02 15:46:59 -08:00
parent ad6fb067e9
commit 94cf671c15
21 changed files with 446 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.dart Normal file
View File

@ -0,0 +1,2 @@
library angular2.examples.core.pipes.ts.async_pipe;
// TODO(alxhub): Implement an example for Dart.

56
modules/angular2/examples/core/pipes/ts/async_pipe/async_pipe_example.ts Normal file
View File

@ -0,0 +1,56 @@
import {Component, provide, Observable} from 'angular2/angular2';
import {bootstrap} from 'angular2/bootstrap';
// #docregion AsyncPipe
@Component({
selector: 'async-example',
template: `<div>
<p>Wait for it... {{promise | async}}</p>
<button (click)="clicked()">{{resolved ? 'Reset' : 'Resolve'}}</button>
</div>`
})
export class AsyncPipeExample {
resolved: boolean = false;
promise: Promise<string> = null;
resolve: Function = null;
constructor() { this.reset(); }
reset() {
this.resolved = false;
this.promise = new Promise<string>((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<number>(
observer => { setInterval(_ => observer.next(new Date().getTime()), 500); });
}
// #enddocregion
@Component({
selector: 'example-app',
directives: [AsyncPipeExample],
template: `
<h1>AsyncPipe Example</h1>
<async-example></async-example>
`
})
export class AppCmp {
}
export function main() {
bootstrap(AppCmp);
}

24
modules/angular2/examples/core/pipes/ts/async_pipe/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>AsyncPipe Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = 'angular2/examples/core/pipes/ts/async_pipe/async_pipe_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

2
modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.dart Normal file
View File

@ -0,0 +1,2 @@
library angular2.examples.core.pipes.ts.date_pipe;
// TODO(alxhub): Implement an example for Dart.

31
modules/angular2/examples/core/pipes/ts/date_pipe/date_pipe_example.ts Normal file
View File

@ -0,0 +1,31 @@
import {Component, provide} from 'angular2/angular2';
import {bootstrap} from 'angular2/bootstrap';
// #docregion DatePipe
@Component({
selector: 'date-example',
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 {
today: number = Date.now();
}
// #enddocregion
@Component({
selector: 'example-app',
directives: [DatePipeExample],
template: `
<h1>DatePipe Example</h1>
<date-example></date-example>
`
})
export class AppCmp {
}
export function main() {
bootstrap(AppCmp);
}

24
modules/angular2/examples/core/pipes/ts/date_pipe/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>DatePipe Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = 'angular2/examples/core/pipes/ts/date_pipe/date_pipe_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

24
modules/angular2/examples/core/pipes/ts/json_pipe/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>JsonPipe Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = 'angular2/examples/core/pipes/ts/json_pipe/json_pipe_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

32
modules/angular2/examples/core/pipes/ts/json_pipe/json_pipe_example.ts Normal file
View File

@ -0,0 +1,32 @@
import {Component, provide} from 'angular2/angular2';
import {bootstrap} from 'angular2/bootstrap';
// #docregion JsonPipe
@Component({
selector: 'json-example',
template: `<div>
<p>Without JSON pipe:</p>
<pre>{{object}}</pre>
<p>With JSON pipe:</p>
<pre>{{object | json}}</pre>
</div>`
})
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: `
<h1>JsonPipe Example</h1>
<json-example></json-example>
`
})
export class AppCmp {
}
export function main() {
bootstrap(AppCmp);
}

24
modules/angular2/examples/core/pipes/ts/lowerupper_pipe/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>LowercasePipe &amp; UppercasePipe Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = 'angular2/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

32
modules/angular2/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts Normal file
View File

@ -0,0 +1,32 @@
import {Component, provide} from 'angular2/angular2';
import {bootstrap} from 'angular2/bootstrap';
// #docregion LowerUpperPipe
@Component({
selector: 'lowerupper-example',
template: `<div>
<label>Name: </label><input #name (keyup)="change(name.value)" type="text"></input>
<p>In lowercase: <pre>'{{value | lowercase}}'</pre></p>
<p>In uppercase: <pre>'{{value | uppercase}}'</pre></p>
</div>`
})
export class LowerUpperPipeExample {
value: string;
change(value) { this.value = value; }
}
// #enddocregion
@Component({
selector: 'example-app',
directives: [LowerUpperPipeExample],
template: `
<h1>LowercasePipe &amp; UppercasePipe Example</h1>
<lowerupper-example></lowerupper-example>
`
})
export class AppCmp {
}
export function main() {
bootstrap(AppCmp);
}

24
modules/angular2/examples/core/pipes/ts/number_pipe/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>Numeric Pipe Examples</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = 'angular2/examples/core/pipes/ts/number_pipe/number_pipe_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

66
modules/angular2/examples/core/pipes/ts/number_pipe/number_pipe_example.ts Normal file
View File

@ -0,0 +1,66 @@
import {Component, provide} from 'angular2/angular2';
import {bootstrap} from 'angular2/bootstrap';
// #docregion NumberPipe
@Component({
selector: 'number-example',
template: `<div>
<p>e (no formatting): {{e}}</p>
<p>e (3.1-5): {{e | number:'3.1-5'}}</p>
<p>pi (no formatting): {{pi}}</p>
<p>pi (3.5-5): {{pi | number:'3.5-5'}}</p>
</div>`
})
export class NumberPipeExample {
pi: number = 3.141;
e: number = 2.718281828459045;
}
// #enddocregion
// #docregion PercentPipe
@Component({
selector: 'percent-example',
template: `<div>
<p>A: {{a | percent}}</p>
<p>B: {{b | percent:'4.3-5'}}</p>
</div>`
})
export class PercentPipeExample {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion
// #docregion CurrencyPipe
@Component({
selector: 'currency-example',
template: `<div>
<p>A: {{a | currency:'USD':false}}</p>
<p>B: {{b | currency:'USD':true:'4.2-2'}}</p>
</div>`
})
export class CurrencyPipeExample {
a: number = 0.259;
b: number = 1.3495;
}
// #enddocregion
@Component({
selector: 'example-app',
directives: [NumberPipeExample, PercentPipeExample, CurrencyPipeExample],
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 {
}
export function main() {
bootstrap(AppCmp);
}

24
modules/angular2/examples/core/pipes/ts/slice_pipe/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html>
<head>
<title>SlicePipe Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
<script src="/bundle/angular2.dev.js"></script>
<script src="/bundle/router.dev.js"></script>
</head>
<body>
<example-app>
Loading...
</example-app>
<script>
var filename = 'angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example';
System.import(filename).then(function(m) {
m.main();
}, console.error.bind(console));
</script>
</body>
</html>

47
modules/angular2/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts Normal file
View File

@ -0,0 +1,47 @@
import {Component, provide} from 'angular2/angular2';
import {bootstrap} from 'angular2/bootstrap';
// #docregion SlicePipe_string
@Component({
selector: 'slice-string-example',
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>
<p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
<p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
<p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
<p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
</div>`
})
export class SlicePipeStringExample {
str: string = 'abcdefghij';
}
// #enddocregion
// #docregion SlicePipe_list
@Component({
selector: 'slice-list-example',
template: `<div>
<li *ng-for="var i of collection | slice:1:3">{{i}}</li>
</div>`
})
export class SlicePipeListExample {
collection: string[] = ['a', 'b', 'c', 'd'];
}
// #enddocregion
@Component({
selector: 'example-app',
directives: [SlicePipeListExample, SlicePipeStringExample],
template: `
<h1>SlicePipe Examples</h1>
<slice-list-example></slice-list-example>
<slice-string-example></slice-string-example>
`
})
export class AppCmp {
}
export function main() {
bootstrap(AppCmp);
}

23
modules/angular2/src/common/pipes/async_pipe.ts
View File

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

4
modules/angular2/src/common/pipes/date_pipe.ts
View File

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

19
modules/angular2/src/common/pipes/json_pipe.ts
View File

@ -4,25 +4,10 @@ import {PipeTransform, WrappedValue} from 'angular2/src/core/change_detection';
import {Pipe} from 'angular2/src/core/metadata'; import {Pipe} from 'angular2/src/core/metadata';
/** /**
* Implements json transforms to any object. * Transforms any input value using `JSON.stringify`. Useful for debugging.
* *
* ### Example * ### Example
* * {@example core/pipes/ts/json_pipe/json_pipe_example.ts region='JsonPipe'}
* 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" };
* }
* }
*
* ```
*/ */
@CONST() @CONST()
@Pipe({name: 'json', pure: false}) @Pipe({name: 'json', pure: false})

16
modules/angular2/src/common/pipes/lowercase_pipe.ts
View File

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

17
modules/angular2/src/common/pipes/number_pipe.ts
View File

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

13
modules/angular2/src/common/pipes/slice_pipe.ts
View File

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

13
modules/angular2/src/common/pipes/uppercase_pipe.ts
View File

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