added reactive services patterns for data layer

Author: sasha7

patterns/services/statefull-observable-data.service.ts

@@ -0,0 +1,81 @@
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/filter';
+
+// Example of a custom Data Type for our Notes model
+export interface User {
+  firstName: string;
+  lastName: string;
+  email: string;
+  gender: string;
+}
+
+/**
+ * Statefull service which provides an Observable-based API with Observable Data
+ *
+ * Main Features:
+ * 1. Statefull:
+ * - This service is statefull and exposes a state variable which is the Observable called user$
+ *
+ * 2. Observable-based API:
+ * - For any component which is using this service, the service ensures isolation
+ *   from how the data is retrieved - in this case, Angular HTTP service.
+ *
+ * When to use:
+ * - when we want service act as a permanent storage for our fetched data
+ *
+ *
+ * Example usage:
+ *
+ * @Component({
+ *   selector: 'home',
+ *   template: `
+ *     <div class='main'>
+ *         <user-detail  [user]="user$ | async"></user-detail>
+ *      </div>`
+ + })
+ * public class HomeComponent {
+ *   user$: Observable<User>
+ *   constructor(private userService: StatefullObservableDataService) {
+ *     this.user$ = userService.user$;
+ *   }
+ * }
+ *
+ */
+@Injectable()
+export class StatefullObservableDataService {
+  static API_URL = `/api/v1/user/`;
+
+  // Subject implements Observer and the Observable interfaces.
+  // This means we can emit values and also use it as an Observable.
+  // In the following case our subject is a Behavior Subject, meaning it stores the
+  // last value emitted and sends it immediately upon subscription.
+  private subject: BehaviorSubject<User> = new BehaviorSubject<User>(null);
+
+  // Our Observable data which is exposed as a state variable.
+  // This Observable is derived from a Subject, and a filter is
+  // applied to prevent the null value from being propagated.
+  public user$: Observable<User> = this.subject.asObservable().filter(user => !!user);
+
+  constructor(private http: Http) {
+    // The user data is retrieved from the backend using the HTTP service.
+    // Once the data is available, we emit a new value of the subject.
+    this.getUserInfo()
+      .subscribe((user: User) => this.subject.next(user));
+  }
+
+  /**
+   * Get user information from backend API service
+   *
+   * @return {Observable<User>}
+   */
+  private getUserInfo(): Observable<User> {
+    return this.http
+      .get(StatefullObservableDataService.API_URL)
+      .map((res: Response) => res.json());
+  }
+
+}

patterns/services/stateless-observable-api.service.ts

@@ -0,0 +1,87 @@
+import { Injectable } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+// Example of a custom Data Type for our Notes model
+export interface Note {
+  title: string;
+  body: string;
+  author: string;
+}
+
+/**
+ * Stateless service which provides an Observable-based API
+ *
+ * Main Features:
+ * 1. Statelessnes:
+ * - It has no member variables for holding data.
+ *
+ * 2. Observable-based API:
+ * - All methods return Observables of a custom data type (e.g. `Note` or `Note[]`).
+ * - For any component which is using this service, the service ensures isolation
+ *   from how the data is retrieved - in this case, Angular HTTP service.
+ *
+ * When to use:
+ * - for example: CRUD interaction with a RESTful API backend.
+ * - very simple usage (e.g. get some data from the backend API and pass it to the View Layer)
+ * - no advanced features (e.g. caching responses from APIs inside service)
+ *
+ *
+ * Example usage:
+ *
+ * @Component({
+ *   selector: 'home',
+ *   template: `
+ *     <div class='main'>
+ *         <note-detail *ngIf="isLoaded" [note]="note"></note-detail>
+ *     </div>`
+ * })
+ * public class HomeComponent {
+ *   public note: Note;
+ *   public isLoaded: boolean = false;
+ *
+ *   constructor(private noteService: StatelessObservableService) {
+ *     this.is
+ *     this.noteService.findOne(1)
+ *       .subscribe((note: Note) => {
+ *         this.isLoaded = true;
+ *         this.note = note;
+ *       }, (error) => {
+ *         this.isLoaded = false;
+ *         console.log(`Could not load note  ${error}`);
+ *       });
+ *   }
+ * }
+ *
+ */
+@Injectable()
+export class StatelessObservableService {
+  static API_URL: string = '/api/v1/note/';
+
+  constructor(private http: Http) { }
+
+  /**
+   * Get a listing of the resource.
+   *
+   * @returns {Observable<Note[]>}
+   */
+  public findAll(): Observable<Note[]> {
+    return this.http
+      .get(StatelessObservableService.API_URL)
+      .map((res: Response) => res.json());
+  }
+
+  /**
+   * Find one resource by `id`.
+   *
+   * @param  {string}           id
+   * @return {Observable<Note>}
+   */
+  public findOne(id: string): Observable<Note> {
+    return this.http
+      .get(`{StatelessObservableService.API_URL}/id`)
+      .map((res: Response) => res.json());
+  }
+
+}