Added more writeup on data sharing. Added examples to guide

Author: brandonroberts

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

@@ -1,3 +1,5 @@
+// #docplaster
+// #docregion
 import { Injectable } from '@angular/core';
 import { Response } from '@angular/http';
 import { Observable } from 'rxjs/Observable';

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

@@ -6,10 +6,12 @@ import { AddHeroComponent }     from './add-hero.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroSearchComponent }  from './hero-search.component';
 import { HeroListComponent }    from './hero-list.component';
+import { HeroCounterComponent } from './hero-counter.component';
 
 const appRoutes: Routes = [
   { path: 'heroes/add', component: AddHeroComponent },
   { path: 'heroes/search', component: HeroSearchComponent },
+  { path: 'hero/counter', component: HeroCounterComponent },
   { path: 'heroes', component: HeroListComponent },
   { path: 'hero/:id', component: HeroDetailComponent },
   { path: '', redirectTo: '/heroes', pathMatch: 'full' },

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

@@ -1,20 +1,31 @@
 // #docplaster
 // #docregion
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { EventAggregatorService } from './event-aggregator.service';
 
 @Component({
   selector: 'my-app',
   template: `
     <h1 class="title">RxJS in Angular</h1>
 
     <a routerLink="/heroes">Heroes</a><br>
+    <a routerLink="/hero/counter">Hero Counter</a><br>
     <a routerLink="/heroes/add">Add Hero</a><br>
     <a routerLink="/heroes/search">Hero Search</a>
 
     <router-outlet></router-outlet>
 
     <loading-component></loading-component>
+    <message-log></message-log>
   `
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  constructor(private eventService: EventAggregatorService) {}
+
+  ngOnInit() {
+    this.eventService.add({
+      type: 'init',
+      message: 'Application Initialized'
+    });
+  }
 }

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

@@ -2,7 +2,7 @@
 import { NgModule }             from '@angular/core';
 import { BrowserModule }        from '@angular/platform-browser';
 import { HttpModule }           from '@angular/http';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule }  from '@angular/forms';
 
 import { AppComponent }               from './app.component';
 import { AppRoutingModule }           from './app-routing.module';
@@ -12,13 +12,19 @@ import { HeroSearchComponent }        from './hero-search.component';
 import { HeroDetailComponent }        from './hero-detail.component';
 import { HeroListComponent }          from './hero-list.component';
 import { HeroCounterComponent }       from './hero-counter.component';
+import { MessageLogComponent }        from './message-log.component';
+
 import { LoadingService }             from './loading.service';
 import { HeroService }                from './hero.service';
 
+// #docregion event-aggregator-import
+import { EventAggregatorService }     from  './event-aggregator.service';
+// #enddocregion event-aggregator-import
+import { ApiErrorHandlerService } from './api-error-handler.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: [
@@ -35,11 +41,13 @@ import { ApiErrorHandlerService } from './api-error-handler.service';
     HeroSearchComponent,
     HeroDetailComponent,
     HeroListComponent,
-    HeroCounterComponent
+    HeroCounterComponent,
+    MessageLogComponent
   ],
   providers: [
     HeroService,
     LoadingService,
+    EventAggregatorService,
     ApiErrorHandlerService
   ],
   bootstrap: [ AppComponent ]

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

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

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

@@ -1,14 +1,11 @@
 // #docplaster
 // #docregion
-import { Component, OnInit }   from '@angular/core';
+import { Component, OnInit, OnDestroy }   from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
 import { Subscription } from 'rxjs/Subscription';
 
-import { HeroService }   from './hero.service';
-import { Hero }          from './hero';
-
 @Component({
   selector: 'hero-counter',
   template: `
@@ -18,15 +15,15 @@ import { Hero }          from './hero';
     </p>
   `
 })
-export class HeroCounterComponent implements OnInit {
+export class HeroCounterComponent implements OnInit, OnDestroy {
   count: number = 0;
   counter$: Observable<number>;
   sub: Subscription;
   destroy$ = new Subject();
 
   ngOnInit() {
     this.counter$ = Observable.create((observer: Observer<number>) => {
-      const interval = setInterval(() => {
+      setInterval(() => {
         observer.next(this.count++);
       }, 1000);
     });

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

@@ -1,5 +1,6 @@
-import 'rxjs/add/operator/delay';
-import { Component, OnInit } from '@angular/core';
+// #docplaster
+// #docregion
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { LoadingService } from './loading.service';
 
@@ -11,7 +12,7 @@ import { LoadingService } from './loading.service';
   `,
   styleUrls: ['./loading.component.css']
 })
-export class LoadingComponent implements OnInit {
+export class LoadingComponent implements OnInit, OnDestroy {
   loading: boolean = true;
   sub: Subscription;
 

public/docs/_examples/rxjs/ts/app/loading.service.ts

@@ -1,3 +1,5 @@
+// #docplaster
+// #docregion
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/distinctUntilChanged';
 import { Injectable } from '@angular/core';

public/docs/_examples/rxjs/ts/app/message-log.component.ts

@@ -0,0 +1,25 @@
+// #docplaster
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { EventAggregatorService, AppEvent } from './event-aggregator.service';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+  selector: 'message-log',
+  template: `
+    <h3>Event Log</h3>
+
+    <ul>
+      <li *ngFor="let event of events$ | async">{{ event.message }}</li>
+    </ul>
+  `
+})
+export class MessageLogComponent implements OnInit {
+  events$: Observable<AppEvent[]>;
+
+  constructor(private eventService: EventAggregatorService) {}
+
+  ngOnInit() {
+    this.events$ = this.eventService.events$;
+  }
+}