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

Commit 913f1d3

Browse files
wardbellwardbell
committed
docs(toh6-http): ward's tweaks
1 parent 86668a0 commit 913f1d3

File tree

10 files changed

+217
-127
lines changed

10 files changed

+217
-127
lines changed

‎public/docs/_examples/toh-5/ts/app/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { bootstrap } from 'angular2/platform/browser';
22
import { AppComponent } from './app.component';
33

4-
bootstrap(AppComponent);
4+
bootstrap(AppComponent);

‎public/docs/_examples/toh-6/ts/app/app.component.ts

+22-9
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,21 @@ import { HeroDetailComponent } from './hero-detail.component';
1010

1111
import { provide } from 'angular2/core';
1212

13-
//#docregion http
14-
//Required import for Http in general
13+
// #docregion http
1514
import { HTTP_PROVIDERS } from 'angular2/http';
15+
// #enddocregion http
1616

17-
//These imports are only required for the in-memory web api
17+
// #docregion web-api
18+
// These imports are only required for the in-memory web api
1819
import { InMemoryBackendService, SEED_DATA } from 'a2-in-memory-web-api/core';
1920
import { XHRBackend } from 'angular2/http';
2021
import { InMemoryDataService } from './in-memory-data.service';
22+
// #docregion http
2123

2224
@Component({
25+
// ...
26+
// #enddocregion http
27+
// #enddocregion web-api
2328
selector: 'my-app',
2429

2530
template: `
@@ -32,18 +37,26 @@ import { InMemoryDataService } from './in-memory-data.service';
3237
`,
3338
styleUrls: ['app/app.component.css'],
3439
directives: [ROUTER_DIRECTIVES],
40+
// #docregion http, web-api
3541
providers: [
36-
ROUTER_PROVIDERS,
42+
// ...
43+
// #enddocregion http, web-api
44+
ROUTER_PROVIDERS,
3745
HeroService,
38-
39-
HTTP_PROVIDERS, //Required registration of HTTP_PROVIDERS
40-
41-
// Only required for the in-memory web api
46+
47+
// #docregion http
48+
HTTP_PROVIDERS, // Required registration of HTTP_PROVIDERS
49+
// #enddocregion http
50+
51+
// #docregion web-api
52+
// Only required for the in-memory web api
4253
provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
4354
provide(SEED_DATA, { useClass: InMemoryDataService }) // in-mem server data
55+
// #enddocregion web-api
56+
// #docregion http, web-api
4457
]
4558
})
46-
//#enddocregion http
59+
// #enddocregion http, web-api
4760
@RouteConfig([
4861
{
4962
path: '/dashboard',

‎public/docs/_examples/toh-6/ts/app/hero-detail.component.ts

+15-11
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@ import { HeroService } from './hero.service';
1212
})
1313
export class HeroDetailComponent implements OnInit {
1414
@Input() hero: Hero;
15-
@Output() updateHeroes = new EventEmitter();
16-
error:any;
15+
@Output() close = new EventEmitter();
16+
error: any;
17+
navigated = false; // true if navigated here
1718

1819
constructor(
1920
private _heroService: HeroService,
@@ -22,28 +23,31 @@ export class HeroDetailComponent implements OnInit {
2223

2324
// #docregion ngOnInit
2425
ngOnInit() {
25-
if(this._routeParams.get('id') !== null){
26+
if (this._routeParams.get('id') !== null) {
2627
let id = +this._routeParams.get('id');
28+
this.navigated = true;
2729
this._heroService.getHero(id)
2830
.then(hero => this.hero = hero);
29-
}
30-
else{
31+
} else {
32+
this.navigated = false;
3133
this.hero = new Hero();
3234
}
3335
}
3436
// #enddocregion ngOnInit
3537
// #docregion save
36-
save(){
38+
save() {
3739
this._heroService
3840
.save(this.hero)
39-
.then(response => {
40-
this.updateHeroes.emit(response);
41+
.then(hero => {
42+
this.hero = hero; // saved hero, w/ id if new
43+
this.goBack(hero);
4144
})
42-
.catch(error => this.error = error);//TODO: Display error message
45+
.catch(error => this.error = error); // TODO: Display error message
4346
}
4447
// #enddocregion save
45-
goBack() {
46-
window.history.back();
48+
goBack(savedHero: Hero = null) {
49+
this.close.emit(savedHero);
50+
if (this.navigated) { window.history.back(); }
4751
}
4852
}
4953

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

+54-45
Original file line numberDiff line numberDiff line change
@@ -6,80 +6,89 @@ import { Http, Response, Headers } from 'angular2/http';
66

77
@Injectable()
88
export class HeroService {
9-
9+
1010
private _heroesUrl = 'app/heroes'; // URL to web api
11-
12-
constructor(private _http:Http){
13-
}
14-
15-
//#docregion get-heroes
16-
getHeroes() {
11+
12+
constructor(private _http: Http) { }
13+
14+
// #docregion get-heroes
15+
getHeroes(): Promise<Hero[]> {
1716
return this._http
17+
// #docregion to-promise
1818
.get(this._heroesUrl).toPromise()
19-
.then((res:Response) => res.json().data)
19+
// #enddocregion to-promise
20+
// #docregion to-data
21+
.then(response => response.json().data)
22+
// #enddocregion to-data
23+
// #docregion catch
2024
.catch(this._handleError);
25+
// #enddocregion catch
2126
}
22-
//#enddocregion get-heroes
23-
27+
// #enddocregion get-heroes
28+
2429
getHero(id: number) {
2530
return this.getHeroes()
26-
.then(heroes => heroes.filter((hero:Hero) => hero.id === id)[0]);
31+
.then(heroes => heroes.filter(hero => hero.id === id)[0]);
2732
}
28-
29-
//#docregion save
30-
save(hero:Hero){
31-
if(hero.id){
33+
34+
// #docregion save
35+
save(hero: Hero): Promise<Hero> {
36+
if (hero.id) {
3237
return this._put(hero);
3338
}
3439
return this._post(hero);
3540
}
36-
//#enddocregion save
37-
38-
//#docregion delete-hero
39-
delete(hero:Hero){
41+
// #enddocregion save
42+
43+
// #docregion delete-hero
44+
delete(hero: Hero) {
4045
let headers = new Headers();
4146
headers.append('Content-Type', 'application/json');
42-
47+
4348
let url = `${this._heroesUrl}/${hero.id}`;
44-
49+
4550
return this._http
46-
.delete(url,headers)
51+
.delete(url, headers)
4752
.toPromise()
4853
.catch(this._handleError);
4954
}
50-
//#enddocregion delete-hero
51-
52-
//#docregion post-hero
53-
private _post(hero:Hero){
54-
let headers = new Headers();
55-
headers.append('Content-Type', 'application/json');
56-
55+
// #enddocregion delete-hero
56+
57+
// #docregion post-hero
58+
// Add new Hero
59+
private _post(hero: Hero): Promise<Hero> {
60+
let headers = new Headers({
61+
'Content-Type': 'application/json'});
62+
5763
return this._http
58-
.post(this._heroesUrl, JSON.stringify(hero), {headers:headers})
64+
.post(this._heroesUrl, JSON.stringify(hero), {headers: headers})
5965
.toPromise()
66+
.then(res => res.json().data)
6067
.catch(this._handleError);
6168
}
62-
//#enddocregion post-hero
63-
64-
//#docregion put-hero
65-
private _put(hero:Hero){
69+
// #enddocregion post-hero
70+
71+
// #docregion put-hero
72+
// Update existing Hero
73+
private _put(hero: Hero) {
6674
let headers = new Headers();
6775
headers.append('Content-Type', 'application/json');
68-
76+
6977
let url = `${this._heroesUrl}/${hero.id}`;
70-
78+
7179
return this._http
72-
.put(url, JSON.stringify(hero), {headers:headers})
80+
.put(url, JSON.stringify(hero), {headers: headers})
7381
.toPromise()
82+
.then(() => hero)
7483
.catch(this._handleError);
7584
}
76-
//#enddocregion put-hero
77-
78-
//#docregion error-handler
79-
private _handleError(error:any){
80-
console.log('An error occurred:' + error);
81-
return Promise.reject(error);
85+
// #enddocregion put-hero
86+
87+
// #docregion error-handler
88+
private _handleError(error: any) {
89+
console.error('An error occurred', error);
90+
return Promise.reject(error.message || error);
8291
}
83-
//#enddocregion error-handler
92+
// #enddocregion error-handler
8493
}
85-
// #enddocregion
94+
// #enddocregion

‎public/docs/_examples/toh-6/ts/app/heroes.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h2>My Heroes</h2>
1111

1212
<button (click)="addHero()">Add New Hero</button>
1313
<div *ngIf="addingHero">
14-
<my-hero-detail (updateHeroes)="getHeroes()"></my-hero-detail>
14+
<my-hero-detail (close)="close($event)"></my-hero-detail>
1515
</div>
1616
<div *ngIf="selectedHero">
1717
<h2>

‎public/docs/_examples/toh-6/ts/app/heroes.component.ts

+15-10
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class HeroesComponent implements OnInit {
1616
heroes: Hero[];
1717
selectedHero: Hero;
1818
addingHero = false;
19-
error:any;
19+
error: any;
2020

2121
constructor(
2222
private _router: Router,
@@ -26,32 +26,37 @@ export class HeroesComponent implements OnInit {
2626
this._heroService
2727
.getHeroes()
2828
.then(heroes => this.heroes = heroes)
29-
.catch(error => this.error = error);//TODO: Display error message
29+
.catch(error => this.error = error); // TODO: Display error message
3030
}
31-
32-
addHero(){
31+
32+
addHero() {
3333
this.addingHero = true;
3434
this.selectedHero = null;
3535
}
36-
36+
37+
close(savedHero: Hero) {
38+
this.addingHero = false;
39+
if (savedHero) { this.getHeroes(); }
40+
}
41+
3742
// #docregion delete
38-
delete(hero:Hero, event:any){
39-
event.stopPropagation();
43+
delete(hero: Hero, event: any) {
44+
event.stopPropagation();
4045
this._heroService
4146
.delete(hero)
4247
.then(res => {
4348
this.heroes = this.heroes.filter(h => h.id !== hero.id);
4449
})
45-
.catch(error => this.error = error);//TODO: Display error message
50+
.catch(error => this.error = error); // TODO: Display error message
4651
}
4752
// #enddocregion delete
4853

4954
ngOnInit() {
5055
this.getHeroes();
5156
}
5257

53-
onSelect(hero: Hero) {
54-
this.selectedHero = hero;
58+
onSelect(hero: Hero) {
59+
this.selectedHero = hero;
5560
this.addingHero = false;
5661
}
5762

‎public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
export class InMemoryDataService {
33
createDb() {
44
let heroes = [
5-
{ "id": 1, "name": "Windstorm" },
6-
{ "id": 2, "name": "Bombasto" },
7-
{ "id": 3, "name": "Magneta" },
8-
{ "id": 4, "name": "Tornado" }
5+
{ id: 1, name: 'Windstorm' },
6+
{ id: 2, name: 'Bombasto' },
7+
{ id: 3, name: 'Magneta' },
8+
{ id: 4, name: 'Tornado' }
99
];
1010
return {heroes};
1111
}
12-
}
12+
}

‎public/docs/_examples/toh-6/ts/app/main.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { bootstrap } from 'angular2/platform/browser';
22
import { AppComponent } from './app.component';
33

4-
import 'rxjs/Rx';
4+
// #docregion rxjs
5+
import 'rxjs/Rx'; // adds all rxjs operators
6+
// #enddocregion rxjs
57

6-
bootstrap(AppComponent);
8+
bootstrap(AppComponent);

‎public/docs/_examples/toh-6/ts/index.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,25 @@
1313

1414
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
1515
<script src="node_modules/systemjs/dist/system.src.js"></script>
16+
<!-- #docregion rxjs -->
1617
<script src="node_modules/rxjs/bundles/Rx.js"></script>
18+
<!-- #enddocregion rxjs -->
1719
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
1820
<script src="node_modules/angular2/bundles/router.dev.js"></script>
19-
21+
2022
<!-- #docregion http -->
2123
<script src="node_modules/angular2/bundles/http.dev.js"></script>
2224
<!-- #enddocregion http -->
23-
25+
2426
<script src="node_modules/a2-in-memory-web-api/web-api.js"></script>
25-
27+
2628
<script>
2729
System.config({packages: {app: {format: 'register', defaultExtension: 'js'}}});
2830
System.import('app/main')
2931
.then(null, console.error.bind(console));
3032
</script>
3133
</head>
32-
34+
3335
<body>
3436
<my-app>Loading...</my-app>
3537
</body>

0 commit comments

Comments
 (0)