repackaging: all the file moves
This commit is contained in:
Igor Minar
@ -0,0 +1,8 @@
|
||||
import {DebugElement} from 'angular2/core';
|
||||
|
||||
var debugElement: DebugElement;
|
||||
var predicate: any;
|
||||
|
||||
// #docregion scope_all
|
||||
debugElement.query(predicate);
|
||||
// #enddocregion
|
||||
@ -0,0 +1,32 @@
|
||||
import {
|
||||
Inject,
|
||||
ReflectiveInjector,
|
||||
forwardRef,
|
||||
resolveForwardRef,
|
||||
ForwardRefFn
|
||||
} from 'angular2/core';
|
||||
|
||||
// #docregion forward_ref_fn
|
||||
var ref = forwardRef(() => Lock);
|
||||
// #enddocregion
|
||||
|
||||
// #docregion forward_ref
|
||||
class Door {
|
||||
lock: Lock;
|
||||
constructor(@Inject(forwardRef(() => Lock)) lock: Lock) { this.lock = lock; }
|
||||
}
|
||||
|
||||
// Only at this point Lock is defined.
|
||||
class Lock {}
|
||||
|
||||
var injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);
|
||||
var door = injector.get(Door);
|
||||
expect(door instanceof Door).toBe(true);
|
||||
expect(door.lock instanceof Lock).toBe(true);
|
||||
// #enddocregion
|
||||
|
||||
// #docregion resolve_forward_ref
|
||||
var ref = forwardRef(() => "refValue");
|
||||
expect(resolveForwardRef(ref)).toEqual("refValue");
|
||||
expect(resolveForwardRef("regularValue")).toEqual("regularValue");
|
||||
// #enddocregion
|
||||
@ -0,0 +1,10 @@
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {NG_VALIDATORS} from 'angular2/common';
|
||||
import {Provider} from 'angular2/core';
|
||||
|
||||
let MyApp: Function = null;
|
||||
let myValidator: any = null;
|
||||
|
||||
// #docregion ng_validators
|
||||
bootstrap(MyApp, [new Provider(NG_VALIDATORS, {useValue: myValidator, multi: true})]);
|
||||
// #enddocregion
|
||||
@ -0,0 +1,2 @@
|
||||
library angular2.examples.core.pipes.ts.async_pipe;
|
||||
// TODO(alxhub): Implement an example for Dart.
|
||||
@ -0,0 +1,59 @@
|
||||
import {Component, provide} from 'angular2/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {Observable, Subscriber} from 'rxjs/Rx';
|
||||
|
||||
// #docregion AsyncPipe
|
||||
@Component({
|
||||
selector: 'async-example',
|
||||
template: `<div>
|
||||
<p>Wait for it... {{ greeting | async }}</p>
|
||||
<button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
|
||||
</div>`
|
||||
})
|
||||
export class AsyncPipeExample {
|
||||
greeting: Promise<string> = null;
|
||||
arrived: boolean = false;
|
||||
|
||||
private resolve: Function = null;
|
||||
|
||||
constructor() { this.reset(); }
|
||||
|
||||
reset() {
|
||||
this.arrived = false;
|
||||
this.greeting = new Promise<string>((resolve, reject) => { this.resolve = resolve; });
|
||||
}
|
||||
|
||||
clicked() {
|
||||
if (this.arrived) {
|
||||
this.reset();
|
||||
} else {
|
||||
this.resolve("hi there!");
|
||||
this.arrived = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion AsyncPipeObservable
|
||||
@Component({selector: "task-cmp", template: "Time: {{ time | async }}"})
|
||||
class Task {
|
||||
time = new Observable<number>((observer: Subscriber<number>) => {
|
||||
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/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
// #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/@angular/examples/core/pipes/ts/date_pipe/index.html
Normal file
24
modules/@angular/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/@angular/examples/core/pipes/ts/json_pipe/index.html
Normal file
24
modules/@angular/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/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
// #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/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
// #docregion LowerUpperPipe
|
||||
@Component({
|
||||
selector: 'lowerupper-example',
|
||||
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>
|
||||
</div>`
|
||||
})
|
||||
export class LowerUpperPipeExample {
|
||||
value: string;
|
||||
change(value: string) { 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/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
// #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/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
// #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 *ngFor="let 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);
|
||||
}
|
||||
0
modules/@angular/examples/core/ts/.gitkeep
Normal file
0
modules/@angular/examples/core/ts/.gitkeep
Normal file
13
modules/@angular/examples/core/ts/bootstrap/bootstrap.ts
Normal file
13
modules/@angular/examples/core/ts/bootstrap/bootstrap.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import {Component} from 'angular2/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
|
||||
// #docregion bootstrap
|
||||
@Component({selector: 'my-app', template: 'Hello {{ name }}!'})
|
||||
class MyApp {
|
||||
name: string = 'World';
|
||||
}
|
||||
|
||||
function main() {
|
||||
return bootstrap(MyApp);
|
||||
}
|
||||
// #enddocregion
|
||||
43
modules/@angular/examples/core/ts/metadata/metadata.ts
Normal file
43
modules/@angular/examples/core/ts/metadata/metadata.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import {Component, Attribute, Directive, Pipe} from 'angular2/core';
|
||||
|
||||
var CustomDirective: Function;
|
||||
|
||||
// #docregion component
|
||||
@Component({selector: 'greet', template: 'Hello {{name}}!', directives: [CustomDirective]})
|
||||
class Greet {
|
||||
name: string = 'World';
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion attributeFactory
|
||||
@Component({selector: 'page', template: 'Title: {{title}}'})
|
||||
class Page {
|
||||
title: string;
|
||||
constructor(@Attribute('title') title: string) { this.title = title; }
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion attributeMetadata
|
||||
@Directive({selector: 'input'})
|
||||
class InputAttrDirective {
|
||||
constructor(@Attribute('type') type: string) {
|
||||
// type would be 'text' in this example
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion directive
|
||||
@Directive({selector: 'input'})
|
||||
class InputDirective {
|
||||
constructor() {
|
||||
// Add some logic.
|
||||
}
|
||||
}
|
||||
// #enddocregion
|
||||
|
||||
// #docregion pipe
|
||||
@Pipe({name: 'lowercase'})
|
||||
class Lowercase {
|
||||
transform(v: string, args: any[]) { return v.toLowerCase(); }
|
||||
}
|
||||
// #enddocregion
|
||||
15
modules/@angular/examples/core/ts/platform/platform.ts
Normal file
15
modules/@angular/examples/core/ts/platform/platform.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import {Component, createPlatform, coreLoadAndBootstrap, ReflectiveInjector} from 'angular2/core';
|
||||
import {BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS} from 'angular2/platform/browser';
|
||||
|
||||
var appProviders: any[] = [];
|
||||
|
||||
// #docregion longform
|
||||
@Component({selector: 'my-app', template: 'Hello World'})
|
||||
class MyApp {
|
||||
}
|
||||
|
||||
var platform = createPlatform(ReflectiveInjector.resolveAndCreate(BROWSER_PROVIDERS));
|
||||
var appInjector =
|
||||
ReflectiveInjector.resolveAndCreate([BROWSER_APP_PROVIDERS, appProviders], platform.injector);
|
||||
coreLoadAndBootstrap(appInjector, MyApp);
|
||||
// #enddocregion
|
||||
@ -0,0 +1,5 @@
|
||||
import {Component} from 'angular2/core';
|
||||
|
||||
@Component({selector: 'my-component', template: '<h1>My Component</h1>'})
|
||||
export class MyComponent {
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
// #docregion enableProdMode
|
||||
import {enableProdMode} from 'angular2/core';
|
||||
import {bootstrap} from 'angular2/platform/browser';
|
||||
import {MyComponent} from './my_component';
|
||||
|
||||
enableProdMode();
|
||||
bootstrap(MyComponent);
|
||||
// #enddocregion
|
||||
Reference in New Issue
Block a user