split 10 into 10 and 11

Author: johnpapa

app/app.component.ts

@@ -22,6 +22,7 @@ import { AppComponent as C09Component }   from './chapter-09/app.component';
 import { AppComponent as C09ecComponent } from './chapter-09-exercise-completed/app.component';
 import { AppComponent as C10Component }   from './chapter-10/app.component';
 import { AppComponent as C11Component }   from './chapter-11/app.component';
+import { AppComponent as C12Component }   from './chapter-12/app.component';
 import { AppComponent as C98Component }   from './chapter-98/app.component';
 import { AppComponent as C99Component }   from './chapter-99/app.component';
 
@@ -52,6 +53,7 @@ const chapters: { [index: string]: { component: any, routes: Routes } } = {
   'Chapter 9: exercise (completed)': { component: C09ecComponent, routes: noRoutes },
   'Chapter 10': { component: C10Component, routes: noRoutes },
   'Chapter 11': { component: C11Component, routes: noRoutes },
+  'Chapter 12': { component: C12Component, routes: noRoutes },
 
   'Chapter 98': { component: C98Component, routes: c98Routes },
   'Chapter 99': { component: C99Component, routes: c99Routes },

app/app.module.ts

@@ -21,7 +21,10 @@ import { AppModule as C09Module }   from './chapter-09/app.module';
 import { AppModule as C09ecModule } from './chapter-09-exercise-completed/app.module';
 import { AppModule as C10Module }   from './chapter-10/app.module';
 import { AppModule as C11Module }   from './chapter-11/app.module';
-import { AppModule as C98Module }   from './chapter-98/app.module';
+import { AppModule as C12Module }   from './chapter-12/app.module';
+
+
+import { AppModule as C98Module } from './chapter-98/app.module';
 import { AppModule as C99Module }   from './chapter-99/app.module';
 
 import { AppComponent, ChapterViewDirective } from './app.component';
@@ -46,6 +49,7 @@ import { InMemoryDataService }  from './in-memory-data.service';
     C09Module, C09ecModule,
     C10Module,
     C11Module,
+    C12Module,
     C98Module,
     C99Module,
 

app/chapter-10/customer-list.component.ts

@@ -27,8 +27,7 @@ export class CustomerListComponent implements OnInit {
     this.isBusy = true;
     this.logger.log('Getting customers ...');
 
-    // this.dataService.getCustomersP().then(  // promise version
-    this.dataService.getCustomers().subscribe( // observable version
+    this.dataService.getCustomers().then(  // promise version
       custs => {
         this.isBusy = false;
         this.customers = custs;

app/chapter-10/data.service.ts

@@ -6,18 +6,13 @@ import { createTestCustomers } from '../test-data';
 
 import { LoggerService } from './logger.service';
 
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/delay';
-
 @Injectable()
 export class DataService {
 
   constructor(private logger: LoggerService) { }
 
   /** Get existing customers as a Promise */
-  getCustomersP(): Promise<Customer[]> {
+  getCustomers(): Promise<Customer[]> {
     this.logger.log('Getting customers as a Promise ...');
 
     const customers = createTestCustomers();
@@ -29,15 +24,4 @@ export class DataService {
       }, 1500); // simulate server response latency
     });
   }
-
-  /** Get existing customers as an Observable */
-  getCustomers(): Observable<Customer[]> {
-    this.logger.log('Getting customers as an Observable ...');
-
-    const customers = createTestCustomers();
-
-    return of(customers)
-      .delay(1500) // simulate server response latency
-      .do(custs => this.logger.log(`Got ${custs.length} customers`));
-  }
 }

app/chapter-11/app.module.ts

@@ -1,7 +1,6 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
-import { HttpModule }    from '@angular/http';  // <-- import HttpModule
 
 import { AppComponent }            from './app.component';
 import { AddressComponent }        from './address.component';
@@ -11,18 +10,10 @@ import { CustomerListComponent }   from './customer-list.component';
 import { DataService }   from './data.service';
 import { LoggerService } from './logger.service';
 
-// in-mem-web-api and its test-data service
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService }  from './in-memory-data.service';
-
 @NgModule({
   imports: [
     BrowserModule,
-    FormsModule,
-
-    HttpModule,  // <--  add HttpModule here
-
-    InMemoryWebApiModule.forRoot(InMemoryDataService) // <-- register in-mem-web-api and its data
+    FormsModule
   ],
   declarations: [
     AppComponent,

app/chapter-11/customer-detail.component.ts

@@ -17,6 +17,6 @@ export class CustomerDetailComponent {
 
   hideAddress = false;
 
-  left()   { this.shift.emit(-1); }
-  right()  { this.shift.emit(1); }
+  left()  { this.shift.emit(-1); }
+  right() { this.shift.emit(1); }
 }

app/chapter-11/customer-list.component.html

@@ -1,10 +1,6 @@
 <h1>Customers</h1>
 <p *ngIf="isBusy"><i>Loading customers ...</i></p>
-<p *ngIf="!isBusy">
-  <i>Click to select a customer</i> &nbsp;
-  <button (click)="getCustomers()">Refresh</button> &nbsp;
-  <button (click)="save(customer)" [hidden]="!customer">Save</button> &nbsp;
-</p>
+<p *ngIf="!isBusy"><i>Click to select a customer</i></p>
 
 <ul>
   <li *ngFor="let cust of customers"
@@ -16,8 +12,5 @@ <h1>Customers</h1>
 
 <div *ngIf="customer">
   <hr>
-  <customer-detail [customer]="customer"
-                   (shift)="shift($event)"
-                   (save)="save($event)">
-  </customer-detail>
+  <customer-detail [customer]="customer" (shift)="shift($event)"></customer-detail>
 </div>

app/chapter-11/customer-list.component.ts

@@ -24,34 +24,15 @@ export class CustomerListComponent implements OnInit {
   ngOnInit() { this.getCustomers(); }
 
   getCustomers() {
-    this.customer = undefined;  // <-- clear before refresh
-    this.customers = undefined;
-
     this.isBusy = true;
     this.logger.log('Getting customers ...');
 
-    // this.dataService.getCustomersP().then(  // Promise version
-    this.dataService.getCustomers().subscribe( // Observable version
-        custs => {
-          this.isBusy = false;
-          this.customers = custs;
-        },
-        (errorMsg: string) => {
-          this.isBusy = false;
-          alert(errorMsg);
-        }
-      );
-  }
-
-  save(customer: Customer) {
-    if (!customer) { return; }
-    this.isBusy = true;
-    this.logger.log('Saving ...');
-    this.dataService.update(customer)
-      .subscribe(
-        () => this.isBusy = false,
-        () => this.isBusy = false
-      );
+    // this.dataService.getCustomersP().then(  // promise version
+    this.dataService.getCustomers().subscribe( // observable version
+      custs => {
+        this.isBusy = false;
+        this.customers = custs;
+      });
   }
 
   shift(increment: number) {

app/chapter-11/data.service.ts

@@ -1,75 +1,43 @@
 // Observable DataService
-import { Injectable }    from '@angular/core';
-import { Headers, Http } from '@angular/http';  // <-- import Http & Headers
+import { Injectable } from '@angular/core';
+
+import { Customer }  from './model';
+import { createTestCustomers } from '../test-data';
 
-import { Customer }      from './model';
 import { LoggerService } from './logger.service';
 
 import { Observable } from 'rxjs/Observable';
-
-import 'rxjs/add/operator/catch'; // <-- add rxjs operator extensions used here
+import { of } from 'rxjs/observable/of';
 import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/toPromise';
-
-import 'rxjs/add/observable/throw'; // <-- add rxjs Observable extensions used here
+import 'rxjs/add/operator/delay';
 
 @Injectable()
 export class DataService {
-  private customersUrl = 'api/customers';
-  private headers = new Headers({'Content-Type': 'application/json'});
 
-  constructor(
-    private http: Http,  // <-- inject http
-    private logger: LoggerService) { }
+  constructor(private logger: LoggerService) { }
 
   /** Get existing customers as a Promise */
   getCustomersP(): Promise<Customer[]> {
     this.logger.log('Getting customers as a Promise ...');
 
-    return this.http.get(this.customersUrl) // <-- returns an observable
-      .toPromise()  // <-- convert immediately to a promise
-      .then(response => {
-        const custs = response.json().data as Customer[]; // <-- extract data from the response
-        this.logger.log(`Got ${custs.length} customers`);
-        return custs;
-      })
-      .catch((error: any) => {
-        this.logger.log(`An error occurred ${error}`); // for demo purposes only
-        // re-throw user-facing message
-        return Promise.reject('Something bad happened; check the console');
-      });
-  }
+    const customers = createTestCustomers();
 
+    return new Promise(resolve => {
+      setTimeout(() => {
+        this.logger.log(`Got ${customers.length} customers`);
+        resolve(customers);
+      }, 1500); // simulate server response latency
+    });
+  }
 
   /** Get existing customers as an Observable */
   getCustomers(): Observable<Customer[]> {
     this.logger.log('Getting customers as an Observable ...');
 
-    return this.http.get(this.customersUrl)
-      .map(response => response.json().data as Customer[])  // <-- extract data
-      .do(custs => this.logger.log(`Got ${custs.length} customers`))
-      .catch(error => this.handleError(error));
-  }
-
-  /** Common Http Observable error handler */
-  private handleError(error: any): Observable<any> {
-    this.logger.log(`An error occurred ${error}`); // for demo purposes only
-    // re-throw user-facing message
-    return Observable.throw('Something bad happened; check the console');
-  }
-
-
-  /** Update existing customer */
-  update(customer: Customer): Observable<any> {
-    const url = `${this.customersUrl}/${customer.id}`;
-    const result = this.http.put(url, customer, { headers: this.headers })
-      // .do(() => this.logger.log(`Saved customer ${customer.name}`))
-      .catch(error => this.handleError(error));
-
-    // Result is "cold". Ensure logging even if caller doesn't subscribe
-    result.subscribe(() => this.logger.log(`Saved customer ${customer.name}`));
+    const customers = createTestCustomers();
 
-    return result;
+    return of(customers)
+      .delay(1500) // simulate server response latency
+      .do(custs => this.logger.log(`Got ${custs.length} customers`));
   }
 }

app/chapter-12/address.component.html

@@ -0,0 +1,32 @@
+<div *ngIf="address">
+    <!-- Diagnostic {{ address | json }}-->
+    <fieldset>
+      <label>
+        Street:
+        <input [(ngModel)]="address.street" placeholder="Street">
+      </label>
+    </fieldset>
+    <fieldset>
+      <label>
+        City:
+        <input [(ngModel)]="address.city" placeholder="City">
+      </label>
+    </fieldset>
+    <fieldset>
+      <label>
+        State:
+        <select [(ngModel)]="address.state">
+          <option *ngFor="let state of states">{{state}}</option>
+        </select>
+      </label>
+    </fieldset>
+\    <fieldset>
+      <label>
+        Region:
+        <select [(ngModel)]="address.region">
+          <option *ngFor="let region of regions">{{region}}</option>
+        </select>
+      </label>
+    </fieldset>
+
+</div>