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

Commit c1440e7

Browse files
chalinthso
chalin
authored and
thso
committed
[review-pending] docs(dev guide): server-communication - new prose
New Dart prose, update Dart and Ts code + guide/server-communication/ts: update to docs and example code + guide/server-communication/dart: new prose, update example code + ignore all npm-debug.logs + make Jade ul li TOC elements more compact.
1 parent d3cad18 commit c1440e7

18 files changed

+650
-592
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ _.*
2020
public/docs/xref-*.*
2121
_zip-output
2222
www
23-
/npm-debug.log
23+
npm-debug.log
2424
npm-debug.log.*
2525
*.plnkr.html
2626
plnkr.html

‎public/docs/_examples/server-communication/dart/lib/hero_data.dart

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
1+
// #docregion
2+
import 'package:http/browser_client.dart';
13
import 'package:http_in_memory_web_api/http_in_memory_web_api.dart';
24

3-
CreateDb heroData = () => {
5+
CreateDb createDb = () => {
46
'heroes': [
57
{"id": "1", "name": "Windstorm"},
68
{"id": "2", "name": "Bombasto"},
79
{"id": "3", "name": "Magneta"},
810
{"id": "4", "name": "Tornado"}
911
]
1012
};
13+
14+
BrowserClient HttpClientBackendServiceFactory() =>
15+
new HttpClientInMemoryBackendService(createDb);

‎public/docs/_examples/server-communication/dart/lib/toh/hero.dart

+4-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ class Hero {
55

66
Hero(this.id, this.name);
77

8-
factory Hero.fromJson(Map hero) {
9-
final _id = hero['id'];
10-
final id = _id is int ? _id : int.parse(_id);
11-
return new Hero(id,hero['name']);
12-
}
8+
factory Hero.fromJson(Map<String, dynamic> hero) =>
9+
new Hero(_toInt(hero['id']), hero['name']);
1310

1411
Map toJson() => {'id': id, 'name': name};
12+
13+
static int _toInt(id) => id is int ? id : int.parse(id);
1514
}

‎public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart

+8-21
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,7 @@ import 'hero_service.dart';
88

99
@Component(
1010
selector: 'hero-list',
11-
// #docregion template
12-
template: '''
13-
<h3>Heroes:</h3>
14-
<ul>
15-
<li *ngFor="let hero of heroes">
16-
{{hero.name}}
17-
</li>
18-
</ul>
19-
New Hero:
20-
<input #newHero />
21-
<button (click)="addHero(newHero.value); newHero.value=''">
22-
Add Hero
23-
</button>
24-
<div class="error" *ngIf="hasErrorMessage">{{errorMessage}}</div>
25-
''',
26-
// #enddocregion template
11+
templateUrl: 'hero_list_component.html',
2712
styles: const ['.error {color:red;}'])
2813
// #docregion component
2914
class HeroListComponent implements OnInit {
@@ -33,20 +18,21 @@ class HeroListComponent implements OnInit {
3318

3419
HeroListComponent(this._heroService);
3520

36-
bool get hasErrorMessage => errorMessage != null;
37-
38-
Future ngOnInit() => getHeroes();
21+
Future<Null> ngOnInit() => getHeroes();
3922

4023
// #docregion methods
41-
Future getHeroes() async {
24+
// #docregion getHeroes
25+
Future<Null> getHeroes() async {
4226
try {
4327
heroes = await _heroService.getHeroes();
4428
} catch (e) {
4529
errorMessage = e.toString();
4630
}
4731
}
32+
// #enddocregion getHeroes
4833

49-
Future addHero(String name) async {
34+
// #docregion addHero
35+
Future<Null> addHero(String name) async {
5036
name = name.trim();
5137
if (name.isEmpty) return;
5238
try {
@@ -55,6 +41,7 @@ class HeroListComponent implements OnInit {
5541
errorMessage = e.toString();
5642
}
5743
}
44+
// #enddocregion addHero
5845
// #enddocregion methods
5946
}
6047
// #enddocregion component

‎public/docs/_examples/server-communication/dart/lib/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="let hero of heroes">
5+
{{hero.name}}
6+
</li>
7+
</ul>
8+
New hero name:
9+
<input #newHeroName />
10+
<button (click)="addHero(newHeroName.value); newHeroName.value=''">
11+
Add Hero
12+
</button>
13+
<div class="error" *ngIf="errorMessage != null">{{errorMessage}}</div>

‎public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart

+55-22
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,74 @@
11
// #docplaster
2-
32
// #docregion
3+
// #docregion v1
44
import 'dart:async';
55
import 'dart:convert';
6-
6+
import 'hero.dart';
77
import 'package:angular2/core.dart';
8-
// #enddocregion v1
9-
// #docregion import-request-options
108
import 'package:http/browser_client.dart';
11-
// #enddocregion import-request-options
12-
// #docregion v1
13-
import 'hero.dart';
9+
import 'package:http/http.dart' show Response;
1410

1511
@Injectable()
1612
class HeroService {
17-
final String _heroesUrl = 'app/heroes';
18-
BrowserClient _http;
13+
// #docregion endpoint, http-get
14+
final String _heroesUrl = 'app/heroes'; // URL to web API
15+
// #enddocregion endpoint, http-get
16+
final BrowserClient _http;
1917

2018
HeroService(this._http);
2119

22-
// #docregion methods
20+
// #docregion methods, error-handling, http-get
2321
Future<List<Hero>> getHeroes() async {
24-
final response = await _http.get(_heroesUrl);
25-
final heroes = JSON
26-
.decode(response.body)['data']
27-
.map((value) => new Hero.fromJson(value))
28-
.toList();
29-
print(JSON.encode(heroes)); // eyeball results in the console
30-
return heroes;
22+
try {
23+
final response = await _http.get(_heroesUrl);
24+
final heroes = _extractData(response)
25+
.map((value) => new Hero.fromJson(value))
26+
.toList();
27+
return heroes;
28+
} catch (e) {
29+
throw _handleError(e);
30+
}
3131
}
32+
// #enddocregion error-handling, http-get, v1
3233

34+
// #docregion addhero, addhero-sig
3335
Future<Hero> addHero(String name) async {
34-
final headers = {'content-type': 'application/json'};
35-
final body = JSON.encode({'name': name});
36-
final response = await _http.post(_heroesUrl, headers: headers, body: body);
37-
return new Hero.fromJson(JSON.decode(response.body));
36+
// #enddocregion addhero-sig
37+
try {
38+
final response = await _http.post(_heroesUrl,
39+
headers: {'Content-Type': 'application/json'},
40+
body: JSON.encode({'name': name}));
41+
return new Hero.fromJson(_extractData(response));
42+
} catch (e) {
43+
throw _handleError(e);
44+
}
3845
}
39-
// #enddocregion methods
46+
// #enddocregion addhero, v1
47+
48+
// #docregion extract-data
49+
dynamic _extractData(Response res) {
50+
if (res.statusCode < 200 || res.statusCode >= 300) {
51+
throw new Exception('Response status: ${res.statusCode}');
52+
}
53+
var body = JSON.decode(res.body);
54+
// TODO: once fixed, https://github.com/adaojunior/http-in-memory-web-api/issues/1
55+
// Drop the `?? body` term
56+
return body['data'] ?? body;
57+
}
58+
// #enddocregion extract-data
59+
// #docregion error-handling
60+
61+
Exception _handleError(dynamic e) {
62+
// In a real world app, we might use a remote logging infrastructure
63+
print(e); // log to console instead
64+
return new Exception('Server error; cause: $e');
65+
}
66+
// #enddocregion error-handling, methods
4067
}
4168
// #enddocregion
69+
70+
/*
71+
// #docregion endpoint-json
72+
private _heroesUrl = 'heroes.json'; // URL to JSON file
73+
// #enddocregion endpoint-json
74+
*/

‎public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart

+19-18
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
1+
// #docplaster
2+
// #docregion
13
import 'package:angular2/core.dart';
2-
import 'package:http_in_memory_web_api/http_in_memory_web_api.dart';
34
import 'package:http/browser_client.dart';
4-
import 'package:server_communication/hero_data.dart';
55

66
import 'hero_list_component.dart';
77
import 'hero_service.dart';
8-
9-
@Injectable()
10-
HttpClientInMemoryBackendService HttpClientInMemoryBackendServiceFactory() =>
11-
new HttpClientInMemoryBackendService(heroData); // in-mem server
8+
// #enddocregion
9+
// #docregion in-mem-web-api
10+
/* ... */
11+
import 'package:server_communication/hero_data.dart';
12+
// #docregion
1213

1314
@Component(
15+
// #enddocregion in-mem-web-api
1416
selector: 'my-toh',
15-
// #docregion template
17+
// #docregion template
1618
template: '''
1719
<h1>Tour of Heroes</h1>
1820
<hero-list></hero-list>
1921
''',
20-
// #enddocregion template
22+
// #enddocregion template
23+
directives: const [HeroListComponent],
24+
// #enddocregion
25+
// #docregion in-mem-web-api
26+
/* ... */
27+
// #docregion
2128
providers: const [
2229
HeroService,
23-
//#enddocregion
24-
//#docregion in-mem-web-api-providers
25-
// in-memory web api providers
30+
// #enddocregion
31+
// in-memory web api providers
2632
const Provider(BrowserClient,
27-
useFactory: HttpClientInMemoryBackendServiceFactory)
28-
//#enddocregion in-mem-web-api-providers
29-
//#docregion
30-
],
31-
directives: const [
32-
HeroListComponent
33+
useFactory: HttpClientBackendServiceFactory)
34+
// #docregion
3335
])
3436
class TohComponent {}
35-
// #enddocregion

‎public/docs/_examples/server-communication/dart/web/index.html

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<!DOCTYPE html>
22
<!-- #docregion -->
33
<html>
4+
<head>
5+
<title>Angular 2 Http Demo</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="styles.css">
49

5-
<head>
6-
<title>Angular 2 Http Demo</title>
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<script defer src="main.dart" type="application/dart"></script>
9-
<script defer src="packages/browser/dart.js"></script>
10-
</head>
10+
<script defer src="main.dart" type="application/dart"></script>
11+
<script defer src="packages/browser/dart.js"></script>
12+
</head>
1113

12-
<body>
13-
<my-toh>ToH Loading...</my-toh>
14-
<my-wiki>Wiki Loading...</my-wiki>
15-
<my-wiki-smart>WikiSmart loading...</my-wiki-smart>
16-
</body>
14+
<body>
15+
<my-toh>ToH Loading...</my-toh>
16+
<my-wiki>Wiki Loading...</my-wiki>
17+
<my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
18+
</body>
1719

1820
</html>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ import { HTTP_PROVIDERS } from '@angular/http';
1010
import 'rxjs/Rx';
1111
// #enddocregion import-rxjs
1212

13+
import { TohComponent } from './toh/toh.component';
1314
import { WikiComponent } from './wiki/wiki.component';
1415
import { WikiSmartComponent } from './wiki/wiki-smart.component';
15-
import { TohComponent } from './toh/toh.component';
1616

17-
bootstrap(WikiComponent);
18-
bootstrap(WikiSmartComponent);
1917
// #docregion http-providers
2018
bootstrap(TohComponent, [HTTP_PROVIDERS]);
2119
// #enddocregion http-providers
20+
bootstrap(WikiComponent);
21+
bootstrap(WikiSmartComponent);

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<h3>Heroes:</h3>
33
<ul>
44
<li *ngFor="let hero of heroes">
5-
{{ hero.name }}
5+
{{hero.name}}
66
</li>
77
</ul>
8-
New Hero:
9-
<input #newHero />
10-
<button (click)="addHero(newHero.value); newHero.value=''">
8+
New hero name:
9+
<input #newHeroName />
10+
<button (click)="addHero(newHeroName.value); newHeroName.value=''">
1111
Add Hero
1212
</button>
1313
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div>

0 commit comments

Comments
 (0)