Alex Rickabaugh
@ -0,0 +1,2 @@
|
||||
library angular2.examples.core.pipes.ts.async_pipe;
|
||||
// TODO(alxhub): Implement an example for Dart.
|
||||
@ -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);
|
||||
}
|
||||
@ -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>
|
||||
@ -0,0 +1,2 @@
|
||||
library angular2.examples.core.pipes.ts.date_pipe;
|
||||
// TODO(alxhub): Implement an example for Dart.
|
||||
@ -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
24
modules/angular2/examples/core/pipes/ts/date_pipe/index.html
Normal 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
24
modules/angular2/examples/core/pipes/ts/json_pipe/index.html
Normal 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>
|
||||
@ -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);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>LowercasePipe & 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>
|
||||
@ -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 & UppercasePipe Example</h1>
|
||||
<lowerupper-example></lowerupper-example>
|
||||
`
|
||||
})
|
||||
export class AppCmp {
|
||||
}
|
||||
|
||||
export function main() {
|
||||
bootstrap(AppCmp);
|
||||
}
|
||||
@ -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>
|
||||
@ -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);
|
||||
}
|
||||
@ -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>
|
||||
@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user