docs(rxjs): Added developer guide on Observables

public/docs/_examples/rxjs/e2e-spec.ts

@@ -0,0 +1,12 @@
+'use strict'; // necessary for es6 output in node
+
+import { browser
+/*, element, by, ElementFinder*/
+} from 'protractor';
+
+describe('RxJS', function () {
+
+  beforeAll(function () {
+    browser.get('');
+  });
+});

public/docs/_examples/rxjs/ts/app/api-error-handler.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+export interface ApiError {
+  message: string;
+}
+
+@Injectable()
+export class ApiErrorHandlerService {
+  handle(resp: Response): Observable<Error> {
+    return Observable.of(resp)
+      .switchMap(response => {
+
+        let error: ApiError;
+
+        try {
+          error = response.json().error;
+        } catch (e) {
+          if (response.status === 404) {
+            error = {
+              message: 'The requested resource was not found'
+            };
+          } else {
+            error = {
+              message: 'An unknown error has occurred'
+            };
+          }
+        }
+
+        return Observable.throw(error);
+      });
+  }
+}

public/docs/_examples/rxjs/ts/app/app-routing.module.ts

@@ -0,0 +1,19 @@
+// #docplaster
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { HomeComponent }        from './home.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+import { HeroSearchComponent }  from './hero-search.component';
+
+const appRoutes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'hero/search', component: HeroSearchComponent },
+  { path: 'hero/:id', component: HeroDetailComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/rxjs/ts/app/app.component.ts

@@ -0,0 +1,15 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1 class="title">RxJS in Angular</h1>
+
+    <router-outlet></router-outlet>
+    <loading-component></loading-component>
+  `
+})
+export class AppComponent {
+}

public/docs/_examples/rxjs/ts/app/app.module.ts

@@ -0,0 +1,54 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { HttpModule }           from '@angular/http';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { AppComponent }               from './app.component';
+import { AppRoutingModule }           from './app-routing.module';
+import { HomeComponent }              from './home.component';
+import { HeroesReadyComponent }       from './heroes-ready.component';
+import { CounterComponent }           from './counter.component';
+import { FormFieldComponent }         from './form-field.component';
+import { LoadingComponent }           from './loading.component';
+import { HeroSearchComponent }        from './hero-search.component';
+import { HeroDetailComponent }        from './hero-detail.component';
+import { HeroListComponent }          from './hero-list.component';
+
+import { LoadingService }             from './loading.service';
+import { HeroService }                from './hero.service';
+
+// Imports for loading & configuring the in-memory web api
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
+import { ApiErrorHandlerService } from './api-error-handler.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    HttpModule,
+    AppRoutingModule,
+    ReactiveFormsModule,
+    InMemoryWebApiModule.forRoot(InMemoryDataService)
+  ],
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    HeroesReadyComponent,
+    CounterComponent,
+    FormFieldComponent,
+    LoadingComponent,
+    HeroSearchComponent,
+    HeroDetailComponent,
+    HeroListComponent
+  ],
+  providers: [
+    HeroService,
+    LoadingService,
+    ApiErrorHandlerService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion

public/docs/_examples/rxjs/ts/app/counter.component.1.ts

@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+  selector: 'counter-component',
+  template: `
+    <p>
+      Hero Counter: {{ count }}
+
+      <button (click)="increment()">Increment</button>
+    </p>
+  `
+})
+export class CounterComponent implements OnInit, OnDestroy {
+  count: number = 0;
+  counter$ = new Subject();
+  sub: Subscription;
+
+  ngOnInit() {
+    this.sub = this.counter$.subscribe();
+  }
+
+  increment() {
+    this.counter$.next(this.count++);
+  }
+
+  ngOnDestroy() {
+    this.sub.unsubscribe();
+  }
+}

public/docs/_examples/rxjs/ts/app/counter.component.ts

@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import 'rxjs/add/operator/takeUntil';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Component({
+  selector: 'counter-component',
+  template: `
+    <p>
+      Counter: {{ count }}
+
+      <button (click)="increment()">Increment</button>
+    </p>
+  `
+})
+export class CounterComponent implements OnInit, OnDestroy {
+  count: number = 0;
+  counter$ = new Subject();
+  destroy$: Subject<any> = new Subject();
+
+  ngOnInit() {
+    this.counter$.takeUntil(this.destroy$).subscribe();
+  }
+
+  increment() {
+    this.counter$.next(this.count++);
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
+}

public/docs/_examples/rxjs/ts/app/event-aggregator.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+export interface Event {
+  type: string;
+  message: string;
+}
+
+@Injectable()
+export class EventAggregatorService {
+  _events: Event[];
+  events$: BehaviorSubject<Event[]> = new BehaviorSubject<any>([]);
+
+  add(event: Event) {
+    this._events.push(event);
+    this.next();
+  }
+
+  clear() {
+    this._events = [];
+    this.next();
+  }
+
+  next() {
+    this.events$.next(this._events);
+  }
+}

public/docs/_examples/rxjs/ts/app/form-field.component.ts

@@ -0,0 +1,26 @@
+// #docplaster
+// #docregion
+import 'rxjs/add/observable/of';
+import 'rxjs/add/observable/fromEvent';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'form-field-component',
+  template: `
+    <h3>Observable Form Field</h3>
+    <p>
+      <input type="text" #name>
+      <span *ngIf="blurred$ | async">Blurred</span>
+    </p>
+  `
+})
+export class FormFieldComponent implements OnInit {
+  @ViewChild('name', { read: ElementRef }) name: ElementRef;
+
+  blurred$: Observable<boolean>;
+
+  ngOnInit() {
+    this.blurred$ = Observable.fromEvent(this.name.nativeElement, 'blur');
+  }
+}

public/docs/_examples/rxjs/ts/app/hero-detail.component.ts

@@ -0,0 +1,57 @@
+// #docplaster
+// #docregion
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/filter';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { HeroService } from './hero.service';
+import { Hero } from './hero';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  template: `
+    <div *ngIf="loading">
+      Loading Hero...
+    </div>
+    <div *ngIf="hero">
+      <h3>HEROES</h3>
+      <div>
+        <label>Id: </label>{{ hero.id }}
+      </div>
+      <div>
+        <label>Name: </label>
+        <input placeholder="name" [value]="hero.name"/>
+      </div>
+    </div>
+    <div *ngIf="error">
+      No hero found
+    </div>
+  `
+})
+export class HeroDetailComponent implements OnInit {
+  hero: Hero;
+  loading: boolean = true;
+  error: boolean;
+
+  constructor(
+    private heroService: HeroService,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.route.params
+      .do(() => this.loading = true)
+      .switchMap((params: Params) =>
+        this.heroService.getHero(params['id'])
+          .catch(error => {
+            this.error = true;
+
+            return Observable.of(null);
+          })
+      )
+      .do(() => this.loading = false)
+      .subscribe((hero: Hero) => this.hero = hero);
+  }
+}

public/docs/_examples/rxjs/ts/app/hero-list.component.1.ts

@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import { Component, OnInit }   from '@angular/core';
+
+import { HeroService }   from './hero.service';
+import { Hero }   from './hero';
+
+@Component({
+  selector: 'hero-list',
+  template: `
+    <h2>HEROES</h2>
+    <ul class="items">
+      <li *ngFor="let hero of heroes">
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+      </li>
+    </ul>
+  `
+})
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(
+    private service: HeroService
+  ) {}
+
+  ngOnInit() {
+    this.service.getHeroes()
+      .subscribe(heroes => this.heroes = heroes);
+  }
+}
+// #enddocregion

public/docs/_examples/rxjs/ts/app/hero-list.component.ts

@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import 'rxjs/add/operator/toPromise';
+import { Component, OnInit }   from '@angular/core';
+
+import { HeroService }   from './hero.service';
+import { Hero }   from './hero';
+
+@Component({
+  selector: 'hero-list',
+  template: `
+    <h2>HEROES</h2>
+    <ul class="items">
+      <li *ngFor="let hero of heroes">
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
+      </li>
+    </ul>
+  `
+})
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(
+    private service: HeroService
+  ) {}
+
+  ngOnInit() {
+    this.service.getHeroes()
+      .toPromise()
+      .then((heroes: Hero[]) => this.heroes = heroes);
+  }
+}
+// #enddocregion