Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 353abff

Browse files
wardbellwardbell
committed
docs(server-communication): fix http after testing chapter discoveries
1 parent dd7b517 commit 353abff

File tree

12 files changed

+213
-117
lines changed

12 files changed

+213
-117
lines changed

‎public/docs/_examples/server-communication/ts/app/main.ts

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
//#docregion
2-
import {bootstrap} from 'angular2/platform/browser';
1+
// #docplaster
2+
// #docregion
3+
import { bootstrap } from 'angular2/platform/browser';
4+
// #docregion http-providers
5+
import { HTTP_PROVIDERS } from 'angular2/http';
6+
// #enddocregion http-providers
37

48
// #docregion import-rxjs
59
// Add all operators to Observable
610
import 'rxjs/Rx';
711
// #enddocregion import-rxjs
812

9-
import {WikiComponent} from './wiki/wiki.component';
10-
import {WikiSmartComponent} from './wiki/wiki-smart.component';
11-
import {TohComponent} from './toh/toh.component';
13+
import { WikiComponent } from './wiki/wiki.component';
14+
import { WikiSmartComponent } from './wiki/wiki-smart.component';
15+
import { TohComponent } from './toh/toh.component';
1216

1317
bootstrap(WikiComponent);
1418
bootstrap(WikiSmartComponent);
15-
bootstrap(TohComponent);
19+
// #docregion http-providers
20+
bootstrap(TohComponent, [HTTP_PROVIDERS]);
21+
// #enddocregion http-providers

‎public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts

+3-17
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
1+
// ToH Promise Version
12
// #docregion
23
import {Component, OnInit} from 'angular2/core';
34
import {Hero} from './hero';
45
import {HeroService} from './hero.service.1';
56

67
@Component({
78
selector: 'hero-list',
8-
// #docregion template
9-
template: `
10-
<h3>Heroes:</h3>
11-
<ul>
12-
<li *ngFor="#hero of heroes">
13-
{{ hero.name }}
14-
</li>
15-
</ul>
16-
New Hero:
17-
<input #newHero />
18-
<button (click)="addHero(newHero.value); newHero.value=''">
19-
Add Hero
20-
</button>
21-
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
22-
`,
23-
// #enddocregion template
9+
templateUrl: 'app/toh/hero-list.component.html',
2410
styles: ['.error {color:red;}']
2511
})
2612
// #docregion component
@@ -29,7 +15,7 @@ export class HeroListComponent implements OnInit {
2915
constructor (private _heroService: HeroService) {}
3016

3117
errorMessage: string;
32-
heroes:Hero[];
18+
heroes: Hero[];
3319

3420
ngOnInit() { this.getHeroes(); }
3521

‎public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- #docregion -->
2+
<h3>Heroes:</h3>
3+
<ul>
4+
<li *ngFor="#hero of heroes">
5+
{{ hero.name }}
6+
</li>
7+
</ul>
8+
New Hero:
9+
<input #newHero />
10+
<button (click)="addHero(newHero.value); newHero.value=''">
11+
Add Hero
12+
</button>
13+
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>

‎public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts

+1-14
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,7 @@ import {HeroService} from './hero.service';
55

66
@Component({
77
selector: 'hero-list',
8-
template: `
9-
<h3>Heroes:</h3>
10-
<ul>
11-
<li *ngFor="#hero of heroes">
12-
{{ hero.name }}
13-
</li>
14-
</ul>
15-
New Hero:
16-
<input #newHero />
17-
<button (click)="addHero(newHero.value); newHero.value=''">
18-
Add Hero
19-
</button>
20-
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
21-
`,
8+
templateUrl: 'app/toh/hero-list.component.html',
229
styles: ['.error {color:red;}']
2310
})
2411
// #docregion component

‎public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
/* Promise version */
1+
// ToH Promise Version
22
// #docplaster
33

44
// #docregion
55
import {Injectable} from 'angular2/core';
6-
import {Http} from 'angular2/http';
6+
import {Http, Response} from 'angular2/http';
77
import {Headers, RequestOptions} from 'angular2/http';
88
import {Hero} from './hero';
99

@@ -15,27 +15,36 @@ export class HeroService {
1515
private _heroesUrl = 'app/heroes.json';
1616

1717
// #docregion methods
18-
getHeroes () {
18+
getHeroes (): Promise<Hero[]> {
1919
return this.http.get(this._heroesUrl)
2020
.toPromise()
21-
.then(res => <Hero[]> res.json().data, this.handleError)
22-
.then(data => { console.log(data); return data; }); // eyeball results in the console
21+
.then(this.extractData)
22+
.catch(this.handleError);
2323
}
2424

25-
addHero (name: string) : Promise<Hero> {
25+
addHero (name: string): Promise<Hero> {
2626
let body = JSON.stringify({ name });
2727
let headers = new Headers({ 'Content-Type': 'application/json' });
2828
let options = new RequestOptions({ headers: headers });
2929

3030
return this.http.post(this._heroesUrl, body, options)
3131
.toPromise()
32-
.then(res => <Hero> res.json().data)
32+
.then(this.extractData)
3333
.catch(this.handleError);
3434
}
35+
36+
private extractData(res: Response) {
37+
if (res.status < 200 || res.status >= 300) {
38+
throw new Error('Bad response status: ' + res.status);
39+
}
40+
let body = res.json();
41+
return body.data || { };
42+
}
43+
3544
private handleError (error: any) {
36-
// in a real world app, we may send the error to some remote logging infrastructure
37-
console.error(error); // log to console instead
45+
// In a real world app, we might send the error to remote logging infrastructure
3846
let errMsg = error.message || 'Server error';
47+
console.error(errMsg); // log to console instead
3948
return Promise.reject(errMsg);
4049
}
4150

‎public/docs/_examples/server-communication/ts/app/toh/hero.service.ts

+7-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// #docregion
44
// #docregion v1
55
import {Injectable} from 'angular2/core';
6-
import {Http} from 'angular2/http';
6+
import {Http, Response} from 'angular2/http';
77
// #enddocregion v1
88
// #docregion import-request-options
99
import {Headers, RequestOptions} from 'angular2/http';
@@ -31,18 +31,13 @@ export class HeroService {
3131
// #enddocregion endpoint
3232

3333
// #docregion methods
34-
// #docregion error-handling
34+
// #docregion error-handling, http-get
3535
getHeroes (): Observable<Hero[]> {
36-
// #docregion http-get, http-get-v1
3736
return this.http.get(this._heroesUrl)
3837
.map(this.extractData)
39-
// #enddocregion v1, http-get-v1, error-handling
40-
.do(data => console.log(data)) // eyeball results in the console
41-
// #docregion v1, http-get-v1, error-handling
4238
.catch(this.handleError);
43-
// #enddocregion http-get, http-get-v1
4439
}
45-
// #enddocregion error-handling
40+
// #enddocregion error-handling, http-get
4641
// #enddocregion v1
4742

4843
// #docregion addhero
@@ -62,19 +57,21 @@ export class HeroService {
6257

6358
// #docregion v1
6459

60+
// #docregion extract-data
6561
private extractData(res: Response) {
6662
if (res.status < 200 || res.status >= 300) {
6763
throw new Error('Bad response status: ' + res.status);
6864
}
6965
let body = res.json();
7066
return body.data || { };
7167
}
68+
// #enddocregion extract-data
7269

7370
// #docregion error-handling
7471
private handleError (error: any) {
75-
// in a real world app, we may send the error to some remote logging infrastructure
76-
console.error(error); // log to console instead
72+
// In a real world app, we might send the error to remote logging infrastructure
7773
let errMsg = error.message || 'Server error';
74+
console.error(errMsg); // log to console instead
7875
return Observable.throw(errMsg);
7976
}
8077
// #enddocregion error-handling

‎public/docs/_examples/server-communication/ts/app/toh/toh.component.1.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// ToH Promise Version
2+
console.log ('Promise version');
3+
4+
import { Component } from 'angular2/core';
5+
import { HTTP_PROVIDERS } from 'angular2/http';
6+
7+
import { HeroListComponent } from './hero-list.component.1';
8+
import { HeroService } from './hero.service.1';
9+
10+
import { provide } from 'angular2/core';
11+
import { XHRBackend } from 'angular2/http';
12+
13+
import { InMemoryBackendService,
14+
SEED_DATA } from 'a2-in-memory-web-api/core';
15+
import { HeroData } from '../hero-data';
16+
17+
@Component({
18+
selector: 'my-toh',
19+
template: `
20+
<h1>Tour of Heroes</h1>
21+
<hero-list></hero-list>
22+
`,
23+
directives:[HeroListComponent],
24+
providers: [
25+
HTTP_PROVIDERS,
26+
HeroService,
27+
// in-memory web api providers
28+
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
29+
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data
30+
]
31+
})
32+
export class TohComponent { }

‎public/docs/_examples/server-communication/ts/app/toh/toh.component.2.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// #docplaster
2+
3+
// #docregion
4+
import { Component } from 'angular2/core';
5+
import { HTTP_PROVIDERS } from 'angular2/http';
6+
7+
import { HeroListComponent } from './hero-list.component';
8+
import { HeroService } from './hero.service';
9+
// #enddocregion
10+
11+
// #docregion in-mem-web-api-imports
12+
import { provide } from 'angular2/core';
13+
import { XHRBackend } from 'angular2/http';
14+
15+
// in-memory web api imports
16+
import { InMemoryBackendService,
17+
SEED_DATA } from 'a2-in-memory-web-api/core';
18+
import { HeroData } from '../hero-data';
19+
// #enddocregion in-mem-web-api-imports
20+
// #docregion
21+
22+
@Component({
23+
selector: 'my-toh',
24+
// #docregion template
25+
template: `
26+
<h1>Tour of Heroes</h1>
27+
<hero-list></hero-list>
28+
`,
29+
// #enddocregion template
30+
directives: [HeroListComponent],
31+
providers: [
32+
HTTP_PROVIDERS,
33+
HeroService,
34+
// #enddocregion
35+
// #docregion in-mem-web-api-providers
36+
// in-memory web api providers
37+
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
38+
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data
39+
// #enddocregion in-mem-web-api-providers
40+
// #docregion
41+
]
42+
})
43+
export class TohComponent { }
44+
// #enddocregion

‎public/docs/_examples/server-communication/ts/app/toh/toh.component.ts

+18-19
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
// #docplaster
22

33
// #docregion
4-
import {Component} from 'angular2/core';
5-
import {HTTP_PROVIDERS} from 'angular2/http';
4+
import { Component } from 'angular2/core';
5+
import { HTTP_PROVIDERS } from 'angular2/http';
66

7-
import {Hero} from './hero';
8-
import {HeroListComponent} from './hero-list.component';
9-
import {HeroService} from './hero.service';
10-
//#enddocregion
7+
import { HeroListComponent } from './hero-list.component';
8+
import { HeroService } from './hero.service';
9+
// #enddocregion
1110

12-
//#docregion in-mem-web-api-imports
13-
import {provide} from 'angular2/core';
14-
import {XHRBackend} from 'angular2/http';
11+
// #docregion in-mem-web-api-imports
12+
import { provide } from 'angular2/core';
13+
import { XHRBackend } from 'angular2/http';
1514

1615
// in-memory web api imports
17-
import {InMemoryBackendService,
18-
SEED_DATA} from 'a2-in-memory-web-api/core';
19-
import {HeroData} from '../hero-data';
16+
import { InMemoryBackendService,
17+
SEED_DATA } from 'a2-in-memory-web-api/core';
18+
import { HeroData } from '../hero-data';
2019
// #enddocregion in-mem-web-api-imports
21-
//#docregion
20+
// #docregion
2221

2322
@Component({
2423
selector: 'my-toh',
@@ -28,17 +27,17 @@ import {HeroData} from '../hero-data';
2827
<hero-list></hero-list>
2928
`,
3029
// #enddocregion template
31-
directives:[HeroListComponent],
32-
providers: [
30+
directives: [HeroListComponent],
31+
providers: [
3332
HTTP_PROVIDERS,
3433
HeroService,
35-
//#enddocregion
36-
//#docregion in-mem-web-api-providers
34+
// #enddocregion
35+
// #docregion in-mem-web-api-providers
3736
// in-memory web api providers
3837
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
3938
provide(SEED_DATA, { useClass: HeroData }) // in-mem server data
40-
//#enddocregion in-mem-web-api-providers
41-
//#docregion
39+
// #enddocregion in-mem-web-api-providers
40+
// #docregion
4241
]
4342
})
4443
export class TohComponent { }

‎public/docs/_examples/testing/ts/app/http-hero.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export class HeroService {
3636
}
3737

3838
private handleError (error: any) {
39-
// in a real world app, we may send the error to some remote logging infrastructure
39+
// In a real world app, we might send the error to remote logging infrastructure
4040
let errMsg = error.message || 'Server error';
4141
console.error(errMsg); // log to console instead
4242
return Observable.throw(errMsg);

0 commit comments

Comments
 (0)