repackaging: all the file moves

modules/@angular/examples/README.md

@@ -0,0 +1,6 @@
+# API Examples
+
+This folder contains small example apps that get in-lined into our API docs.
+These examples are written with idiomatic TypeScript, and are not transpiled to Dart.
+Each example contains tests for application behavior (as opposed to testing Angular's
+behavior) just like an Angular application developer would write.

modules/@angular/examples/common/forms/ts/validators/validators.ts

@@ -0,0 +1,30 @@
+import {Component} from 'angular2/core';
+import {MinLengthValidator, MaxLengthValidator} from 'angular2/common';
+
+// #docregion min
+@Component({
+  selector: 'min-cmp',
+  directives: [MinLengthValidator],
+  template: `
+<form>
+  <p>Year: <input ngControl="year" minlength="2"></p>
+</form>
+`
+})
+class MinLengthTestComponent {
+}
+// #enddocregion
+
+// #docregion max
+@Component({
+  selector: 'max-cmp',
+  directives: [MaxLengthValidator],
+  template: `
+<form>
+  <p>Year: <input ngControl="year" maxlength="4"></p>
+</form>
+`
+})
+class MaxLengthTestComponent {
+}
+// #enddocregion

modules/@angular/examples/compiler/ts/url_resolver/url_resolver.ts

@@ -0,0 +1,19 @@
+import {provide} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {UrlResolver} from 'angular2/compiler';
+
+var MyApp: any;
+
+// #docregion url_resolver
+class MyUrlResolver extends UrlResolver {
+  resolve(baseUrl: string, url: string): string {
+    // Serve CSS files from a special CDN.
+    if (url.substr(-4) === '.css') {
+      return super.resolve('http://cdn.myapp.com/css/', url);
+    }
+    return super.resolve(baseUrl, url);
+  }
+}
+
+bootstrap(MyApp, [provide(UrlResolver, {useClass: MyUrlResolver})]);
+// #enddocregion

modules/@angular/examples/core/debug/ts/debug_element/debug_element.ts

@@ -0,0 +1,8 @@
+import {DebugElement} from 'angular2/core';
+
+var debugElement: DebugElement;
+var predicate: any;
+
+// #docregion scope_all
+debugElement.query(predicate);
+// #enddocregion

modules/@angular/examples/core/di/ts/forward_ref/forward_ref.ts

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

modules/@angular/examples/core/forms/ts/ng_validators/ng_validators.ts

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

modules/@angular/examples/core/pipes/ts/async_pipe/async_pipe_example.dart

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

modules/@angular/examples/core/pipes/ts/async_pipe/async_pipe_example.ts

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

modules/@angular/examples/core/pipes/ts/async_pipe/index.html

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

modules/@angular/examples/core/pipes/ts/date_pipe/date_pipe_example.dart

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

modules/@angular/examples/core/pipes/ts/date_pipe/date_pipe_example.ts

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

modules/@angular/examples/core/pipes/ts/date_pipe/index.html

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

modules/@angular/examples/core/pipes/ts/json_pipe/index.html

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

modules/@angular/examples/core/pipes/ts/json_pipe/json_pipe_example.ts

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

modules/@angular/examples/core/pipes/ts/lowerupper_pipe/index.html

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

modules/@angular/examples/core/pipes/ts/lowerupper_pipe/lowerupper_pipe_example.ts

@@ -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 &amp; UppercasePipe Example</h1>
+    <lowerupper-example></lowerupper-example>
+  `
+})
+export class AppCmp {
+}
+
+export function main() {
+  bootstrap(AppCmp);
+}

modules/@angular/examples/core/pipes/ts/number_pipe/index.html

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

modules/@angular/examples/core/pipes/ts/number_pipe/number_pipe_example.ts

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

modules/@angular/examples/core/pipes/ts/slice_pipe/index.html

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

modules/@angular/examples/core/pipes/ts/slice_pipe/slice_pipe_example.ts

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

modules/@angular/examples/core/ts/bootstrap/bootstrap.ts

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

modules/@angular/examples/core/ts/metadata/metadata.ts

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

modules/@angular/examples/core/ts/platform/platform.ts

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

modules/@angular/examples/core/ts/prod_mode/my_component.ts

@@ -0,0 +1,5 @@
+import {Component} from 'angular2/core';
+
+@Component({selector: 'my-component', template: '<h1>My Component</h1>'})
+export class MyComponent {
+}

modules/@angular/examples/core/ts/prod_mode/prod_mode_example.ts

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

modules/@angular/examples/facade/ts/async/observable.ts

@@ -0,0 +1,8 @@
+// #docregion Observable
+import {Observable, Subscriber} from 'rxjs/Rx';
+var obs = new Observable<number>((obs: Subscriber<number>) => {
+  var i = 0;
+  setInterval(() => { obs.next(++i); }, 1000);
+});
+obs.subscribe(i => console.log(`${i} seconds elapsed`));
+// #enddocregion

modules/@angular/examples/facade/ts/async/observable_all.ts

@@ -0,0 +1,3 @@
+// #docregion Observable
+import 'rxjs';
+// #enddocregion

modules/@angular/examples/facade/ts/async/observable_patched.ts

@@ -0,0 +1,10 @@
+// #docregion Observable
+import {Observable, Subscriber} from 'rxjs/Rx';
+import 'rxjs/add/operator/map';
+
+var obs = new Observable<number>((obs: Subscriber<any>) => {
+  var i = 0;
+  setInterval(() => obs.next(++i), 1000);
+});
+obs.map((i: number) => `${i} seconds elapsed`).subscribe(msg => console.log(msg));
+// #enddocregion

modules/@angular/examples/facade/ts/async/observable_pure.ts

@@ -0,0 +1,10 @@
+// #docregion Observable
+import {Observable, Subscriber} from 'rxjs/Rx';
+import {map} from 'rxjs/operator/map';
+
+var obs = new Observable<number>((sub: Subscriber<number>) => {
+  var i = 0;
+  setInterval(() => sub.next(++i), 1000);
+});
+map.call(obs, (i: number) => `${i} seconds elapsed`).subscribe((msg: string) => console.log(msg));
+// #enddocregion

modules/@angular/examples/platform-browser/dom/debug/ts/by/by.ts

@@ -0,0 +1,17 @@
+import {By} from 'angular2/platform/browser';
+import {DebugElement} from 'angular2/core';
+
+var debugElement: DebugElement;
+class MyDirective {}
+
+// #docregion by_all
+debugElement.query(By.all());
+// #enddocregion
+
+// #docregion by_css
+debugElement.query(By.css('[attribute]'));
+// #enddocregion
+
+// #docregion by_directive
+debugElement.query(By.directive(MyDirective));
+// #enddocregion

modules/@angular/examples/platform-browser/dom/debug/ts/debug_element_view_listener/providers.ts

@@ -0,0 +1,10 @@
+import {Component} from 'angular2/core';
+import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
+
+@Component({selector: 'my-component'})
+class MyAppComponent {
+}
+
+// #docregion providers
+bootstrap(MyAppComponent, [ELEMENT_PROBE_PROVIDERS]);
+// #enddocregion

modules/@angular/examples/router/ts/can_activate/can_activate_example.ts

@@ -0,0 +1,52 @@
+import {provide, Component} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {CanActivate, RouteConfig, ComponentInstruction, ROUTER_DIRECTIVES} from 'angular2/router';
+import {APP_BASE_HREF} from 'angular2/platform/common';
+
+function checkIfWeHavePermission(instruction: ComponentInstruction) {
+  return instruction.params['id'] == '1';
+}
+
+// #docregion canActivate
+@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})
+@CanActivate(checkIfWeHavePermission)
+class ControlPanelCmp {
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'home-cmp',
+  template: `
+    <h1>Welcome Home!</h1>
+    <div>
+      Edit <a [routerLink]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
+      Edit <a [routerLink]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
+    </div>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+class HomeCmp {
+}
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>My App</h1>
+    <router-outlet></router-outlet>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  {path: '/user-settings/:id', component: ControlPanelCmp, name: 'ControlPanelCmp'},
+  {path: '/', component: HomeCmp, name: 'HomeCmp'}
+])
+class AppCmp {
+}
+
+
+export function main() {
+  return bootstrap(
+      AppCmp, [provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/can_activate'})]);
+}

modules/@angular/examples/router/ts/can_activate/can_activate_spec.ts

@@ -0,0 +1,36 @@
+import {verifyNoBrowserErrors, browser} from 'angular2/src/testing/e2e_util';
+import {expect} from 'angular2/testing';
+
+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('reuse example app', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  var URL = 'angular2/examples/router/ts/can_activate/';
+
+  it('should navigate to user 1', function() {
+    browser.get(URL);
+    waitForElement('home-cmp');
+
+    element(by.css('#user-1-link')).click();
+    waitForElement('control-panel-cmp');
+    expect(browser.getCurrentUrl()).toMatch(/\/user-settings\/1$/);
+
+    expect(element(by.css('control-panel-cmp')).getText()).toContain('Settings');
+  });
+
+  it('should not navigate to user 2', function() {
+    browser.get(URL);
+    waitForElement('home-cmp');
+
+    element(by.css('#user-2-link')).click();
+    waitForElement('home-cmp');
+
+    expect(element(by.css('home-cmp')).getText()).toContain('Welcome Home!');
+  });
+});

modules/@angular/examples/router/ts/can_activate/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+  <title>Routing canActivate Lifecycle 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/router/ts/can_activate/can_activate_example';
+  System.import(filename).then(function(m) {
+    m.main();
+  }, console.error.bind(console));
+</script>
+</body>
+</html>

modules/@angular/examples/router/ts/can_deactivate/can_deactivate_example.ts

@@ -0,0 +1,67 @@
+import {provide, Component} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {
+  CanDeactivate,
+  RouteConfig,
+  RouteParams,
+  ComponentInstruction,
+  ROUTER_DIRECTIVES
+} from 'angular2/router';
+import {APP_BASE_HREF} from 'angular2/platform/common';
+
+// #docregion routerCanDeactivate
+@Component({
+  selector: 'note-cmp',
+  template: `
+    <div>
+      <h2>id: {{id}}</h2>
+      <textarea cols="40" rows="10"></textarea>
+    </div>`
+})
+class NoteCmp implements CanDeactivate {
+  id: string;
+
+  constructor(params: RouteParams) { this.id = params.get('id'); }
+
+  routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
+    return confirm('Are you sure you want to leave?');
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'note-index-cmp',
+  template: `
+    <h1>Your Notes</h1>
+    <div>
+      Edit <a [routerLink]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
+      Edit <a [routerLink]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
+    </div>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+class NoteIndexCmp {
+}
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>My App</h1>
+    <router-outlet></router-outlet>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  {path: '/note/:id', component: NoteCmp, name: 'NoteCmp'},
+  {path: '/', component: NoteIndexCmp, name: 'NoteIndexCmp'}
+])
+class AppCmp {
+}
+
+
+export function main() {
+  return bootstrap(
+      AppCmp, [provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/can_deactivate'})]);
+}

modules/@angular/examples/router/ts/can_deactivate/can_deactivate_spec.ts

@@ -0,0 +1,52 @@
+import {verifyNoBrowserErrors, browser} from 'angular2/src/testing/e2e_util';
+import {expect} from 'angular2/testing';
+
+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);
+}
+
+function waitForAlert() {
+  var EC = (<any>protractor).ExpectedConditions;
+  browser.wait(EC.alertIsPresent(), 1000);
+}
+
+describe('can deactivate example app', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  var URL = 'angular2/examples/router/ts/can_deactivate/';
+
+  it('should not navigate away when prompt is cancelled', function() {
+    browser.get(URL);
+    waitForElement('note-index-cmp');
+
+    element(by.css('#note-1-link')).click();
+    waitForElement('note-cmp');
+
+    browser.navigate().back();
+    waitForAlert();
+
+    browser.switchTo().alert().dismiss();  // Use to simulate cancel button
+
+    expect(element(by.css('note-cmp')).getText()).toContain('id: 1');
+  });
+
+  it('should navigate away when prompt is confirmed', function() {
+    browser.get(URL);
+    waitForElement('note-index-cmp');
+
+    element(by.css('#note-1-link')).click();
+    waitForElement('note-cmp');
+
+    browser.navigate().back();
+    waitForAlert();
+
+    browser.switchTo().alert().accept();
+
+    waitForElement('note-index-cmp');
+
+    expect(element(by.css('note-index-cmp')).getText()).toContain('Your Notes');
+  });
+});

modules/@angular/examples/router/ts/can_deactivate/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+  <title>Routing routerCanDeactivate Lifecycle 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/router/ts/can_deactivate/can_deactivate_example';
+  System.import(filename).then(function(m) {
+    m.main();
+  }, console.error.bind(console));
+</script>
+</body>
+</html>

modules/@angular/examples/router/ts/on_activate/on_activate_example.ts

@@ -0,0 +1,52 @@
+import {Component, provide} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {OnActivate, ComponentInstruction, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {APP_BASE_HREF} from 'angular2/platform/common';
+
+// #docregion routerOnActivate
+@Component({template: `Child`})
+class ChildCmp {
+}
+
+@Component({
+  template: `
+    <h2>Parent</h2> (<router-outlet></router-outlet>)
+    <p>{{log}}</p>`,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([{path: '/child', name: 'Child', component: ChildCmp}])
+class ParentCmp implements OnActivate {
+  log: string = '';
+
+  routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
+    this.log = `Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`;
+
+    return new Promise(resolve => {
+      // The ChildCmp gets instantiated only when the Promise is resolved
+      setTimeout(() => resolve(null), 1000);
+    });
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>My app</h1>
+
+    <nav>
+      <a [routerLink]="['Parent', 'Child']">Child</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([{path: '/parent/...', name: 'Parent', component: ParentCmp}])
+export class AppCmp {
+}
+
+export function main() {
+  return bootstrap(
+      AppCmp, [provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/on_activate'})]);
+}

modules/@angular/examples/router/ts/on_deactivate/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+  <title>Routing Reuse Lifecycle 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/router/ts/on_deactivate/on_deactivate_example';
+  System.import(filename).then(function(m) {
+    m.main();
+  }, console.error.bind(console));
+</script>
+</body>
+</html>

modules/@angular/examples/router/ts/on_deactivate/on_deactivate_example.ts

@@ -0,0 +1,58 @@
+import {Component, Injectable, provide} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {OnDeactivate, ComponentInstruction, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+import {APP_BASE_HREF} from 'angular2/platform/common';
+
+
+@Injectable()
+class LogService {
+  logs: string[] = [];
+
+  addLog(message: string): void { this.logs.push(message); }
+}
+
+
+// #docregion routerOnDeactivate
+@Component({selector: 'my-cmp', template: `<div>hello</div>`})
+class MyCmp implements OnDeactivate {
+  constructor(private logService: LogService) {}
+
+  routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
+    this.logService.addLog(
+        `Navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`);
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>My App</h1>
+    <nav>
+      <a [routerLink]="['/HomeCmp']" id="home-link">Navigate Home</a> |
+      <a [routerLink]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
+    </nav>
+    <router-outlet></router-outlet>
+    <div id="log">
+      <h2>Log:</h2>
+      <p *ngFor="let logItem of logService.logs">{{ logItem }}</p>
+    </div>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  {path: '/', component: MyCmp, name: 'HomeCmp'},
+  {path: '/:param', component: MyCmp, name: 'ParamCmp'}
+])
+class AppCmp {
+  constructor(public logService: LogService) {}
+}
+
+
+export function main() {
+  return bootstrap(AppCmp, [
+    provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/on_deactivate'}),
+    LogService
+  ]);
+}

modules/@angular/examples/router/ts/on_deactivate/on_deactivate_spec.ts

@@ -0,0 +1,32 @@
+import {verifyNoBrowserErrors, browser} from 'angular2/src/testing/e2e_util';
+import {expect} from 'angular2/testing';
+
+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('on activate example app', function() {
+  afterEach(verifyNoBrowserErrors);
+
+  var URL = 'angular2/examples/router/ts/on_deactivate/';
+
+  it('should update the text when navigating between routes', function() {
+    browser.get(URL);
+    waitForElement('my-cmp');
+
+    expect(element(by.css('#log')).getText()).toEqual('Log:');
+
+    element(by.css('#param-link')).click();
+    waitForElement('my-cmp');
+
+    expect(element(by.css('#log')).getText()).toEqual('Log:\nNavigating from "" to "1"');
+
+    browser.navigate().back();
+    waitForElement('my-cmp');
+
+    expect(element(by.css('#log')).getText())
+        .toEqual('Log:\nNavigating from "" to "1"\nNavigating from "1" to ""');
+  });
+});

modules/@angular/examples/router/ts/reuse/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<head>
+  <title>Routing Reuse Lifecycle 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/router/ts/reuse/reuse_example';
+System.import(filename).then(function(m) {
+  m.main();
+}, console.error.bind(console));
+</script>
+</body>
+</html>

modules/@angular/examples/router/ts/reuse/reuse_example.ts

@@ -0,0 +1,58 @@
+import {Component, provide} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {
+  CanActivate,
+  RouteConfig,
+  ComponentInstruction,
+  ROUTER_DIRECTIVES,
+  CanReuse,
+  RouteParams,
+  OnReuse
+} from 'angular2/router';
+import {APP_BASE_HREF} from 'angular2/platform/common';
+
+
+// #docregion reuseCmp
+@Component({
+  selector: 'my-cmp',
+  template: `
+    <div>hello {{name}}!</div>
+    <div>message: <input id="message"></div>
+  `
+})
+class MyCmp implements CanReuse,
+    OnReuse {
+  name: string;
+  constructor(params: RouteParams) { this.name = params.get('name') || 'NOBODY'; }
+
+  routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
+
+  routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
+    this.name = next.params['name'];
+  }
+}
+// #enddocregion
+
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <h1>Say hi to...</h1>
+    <a [routerLink]="['/HomeCmp', {name: 'naomi'}]" id="naomi-link">Naomi</a> |
+    <a [routerLink]="['/HomeCmp', {name: 'brad'}]" id="brad-link">Brad</a>
+    <router-outlet></router-outlet>
+  `,
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  {path: '/', component: MyCmp, name: 'HomeCmp'},
+  {path: '/:name', component: MyCmp, name: 'HomeCmp'}
+])
+class AppCmp {
+}
+
+
+export function main() {
+  return bootstrap(AppCmp,
+                   [provide(APP_BASE_HREF, {useValue: '/angular2/examples/router/ts/reuse'})]);
+}

modules/@angular/examples/router/ts/reuse/reuse_spec.ts

@@ -0,0 +1,36 @@
+import {verifyNoBrowserErrors, browser} from 'angular2/src/testing/e2e_util';
+import {expect} from 'angular2/testing';
+
+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('reuse example app', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  var URL = 'angular2/examples/router/ts/reuse/';
+
+  it('should build a link which points to the detail page', function() {
+    browser.get(URL);
+    waitForElement('my-cmp');
+
+    element(by.css('#naomi-link')).click();
+    waitForElement('my-cmp');
+    expect(browser.getCurrentUrl()).toMatch(/\/naomi$/);
+
+    // type something into input
+    element(by.css('#message')).sendKeys('long time no see!');
+
+    // navigate to Brad
+    element(by.css('#brad-link')).click();
+    waitForElement('my-cmp');
+    expect(browser.getCurrentUrl()).toMatch(/\/brad$/);
+
+    // check that typed input is the same
+    expect(element(by.css('#message')).getAttribute('value')).toEqual('long time no see!');
+  });
+
+});

modules/@angular/examples/testing/ts/fake_async.ts

@@ -0,0 +1,29 @@
+import {describe, it, fakeAsync, expect, tick, clearPendingTimers} from 'angular2/testing';
+
+// #docregion basic
+describe('this test', () => {
+  it('looks async but is synchronous', <any>fakeAsync((): void => {
+       var flag = false;
+       setTimeout(() => { flag = true; }, 100);
+       expect(flag).toBe(false);
+       tick(50);
+       expect(flag).toBe(false);
+       tick(50);
+       expect(flag).toBe(true);
+     }));
+});
+// #enddocregion
+
+// #docregion pending
+describe('this test', () => {
+  it('aborts a timer', <any>fakeAsync((): void => {
+       // This timer is scheduled but doesn't need to complete for the
+       // test to pass (maybe it's a timeout for some operation).
+       // Leaving it will cause the test to fail...
+       setTimeout(() => {}, 100);
+
+       // Unless we clean it up first.
+       clearPendingTimers();
+     }));
+});
+// #enddocregion

modules/@angular/examples/testing/ts/matchers.ts

@@ -0,0 +1,40 @@
+import {expect} from 'angular2/testing';
+
+var value: any;
+var element: any;
+var exception: any;
+
+abstract class OtherClass {}
+class SomeClass {}
+
+// #docregion toBePromise
+expect(value).toBePromise();
+// #enddocregion
+
+// #docregion toBeAnInstanceOf
+expect(value).toBeAnInstanceOf(SomeClass);
+// #enddocregion
+
+// #docregion toHaveText
+expect(element).toHaveText('Hello world!');
+// #enddocregion
+
+// #docregion toHaveCssClass
+expect(element).toHaveCssClass('current');
+// #enddocregion
+
+// #docregion toHaveCssStyle
+expect(element).toHaveCssStyle({width: '100px', height: 'auto'});
+// #enddocregion
+
+// #docregion toContainError
+expect(exception).toContainError('Failed to load');
+// #enddocregion
+
+// #docregion toThrowErrorWith
+expect(() => { throw 'Failed to load'; }).toThrowErrorWith('Failed to load');
+// #enddocregion
+
+// #docregion toImplement
+expect(SomeClass).toImplement(OtherClass);
+// #enddocregion

modules/@angular/examples/testing/ts/testing.ts

@@ -0,0 +1,90 @@
+import {
+  describe,
+  fdescribe,
+  xdescribe,
+  it,
+  fit,
+  xit,
+  beforeEach,
+  afterEach,
+  beforeEachProviders,
+  inject
+} from 'angular2/testing';
+import {provide} from 'angular2/core';
+
+var db: any;
+class MyService {}
+class MyMockService implements MyService {}
+
+// #docregion describeIt
+describe('some component', () => {
+  it('does something', () => {
+                           // This is a test.
+                       });
+});
+// #enddocregion
+
+// #docregion fdescribe
+fdescribe('some component', () => {
+  it('has a test', () => {
+                       // This test will run.
+                   });
+});
+describe('another component',
+         () => { it('also has a test', () => { throw 'This test will not run.'; }); });
+// #enddocregion
+
+// #docregion xdescribe
+xdescribe('some component', () => { it('has a test', () => {throw 'This test will not run.'}); });
+describe('another component', () => {
+  it('also has a test', () => {
+                            // This test will run.
+                        });
+});
+// #enddocregion
+
+// #docregion fit
+describe('some component', () => {
+  fit('has a test', () => {
+                        // This test will run.
+                    });
+  it('has another test', () => { throw 'This test will not run.'; });
+});
+// #enddocregion
+
+// #docregion xit
+describe('some component', () => {
+  xit('has a test', () => { throw 'This test will not run.'; });
+  it('has another test', () => {
+                             // This test will run.
+                         });
+});
+// #enddocregion
+
+// #docregion beforeEach
+describe('some component', () => {
+  beforeEach(() => { db.connect(); });
+  it('uses the db', () => {
+                        // Database is connected.
+                    });
+});
+// #enddocregion
+
+// #docregion beforeEachProviders
+describe('some component', () => {
+  beforeEachProviders(() => [provide(MyService, {useClass: MyMockService})]);
+  it('uses MyService', inject([MyService], (service: MyMockService) => {
+                                               // service is an instance of MyMockService.
+                                           }));
+});
+// #enddocregion
+
+// #docregion afterEach
+describe('some component', () => {
+  afterEach((done: Function) => { db.reset().then((_: any) => done()); });
+  it('uses the db', () => {
+                        // This test can leave the database in a dirty state.
+                        // The afterEach will ensure it gets reset.
+                    });
+});
+// #enddocregion