Skip to content

Commit 21d8302

Browse files
chalinchalin
committed
docs(architecture/dart): proofread, updated Dart app
- e2e tests now also cover the tax calculator. - Dart app updated to match TS (it had no sales tax calculator). - TS sample source cleanup (e.g. removed many unnecessary `docregions`). - Prose updated to include @kwalrath's revisions from a while ago, with some of my edits as well. Contributes to angular#1598 and angular#1508.
1 parent f3da5c8 commit 21d8302

16 files changed

+179
-512
lines changed

‎public/docs/_examples/architecture/dart/lib/app_component.dart

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// #docregion import
2+
import 'package:angular2/core.dart';
3+
// #enddocregion import
4+
5+
import 'hero_list_component.dart';
6+
import 'sales_tax_component.dart';
7+
8+
@Component(
9+
selector: 'my-app',
10+
template: '''
11+
<hero-list></hero-list>
12+
<sales-tax></sales-tax>''',
13+
directives: const [HeroListComponent, SalesTaxComponent])
14+
// #docregion export
15+
class AppComponent { }

‎public/docs/_examples/architecture/dart/lib/backend_service.dart

+17-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
1-
// #docregion
1+
import 'dart:async';
2+
23
import 'package:angular2/core.dart';
34

45
import 'hero.dart';
56
import 'logger_service.dart';
67

78
@Injectable()
89
class BackendService {
10+
static final _mockHeroes = [
11+
new Hero('Windstorm', 'Weather mastery'),
12+
new Hero('Mr. Nice', 'Killing them with kindness'),
13+
new Hero('Magneta', 'Manipulates metalic objects')
14+
];
15+
916
final Logger _logger;
10-
List getAll(type) {
11-
// TODO get from the database and return as a promise
12-
if (type == Hero) {
13-
return [
14-
new Hero('Windstorm', power: 'Weather mastery'),
15-
new Hero('Mr. Nice', power: 'Killing them with kindness'),
16-
new Hero('Magneta', power: 'Manipulates metalic objects')
17-
];
18-
}
19-
_logger.error('Cannot get object of this type');
20-
throw new ArgumentError("TODO: put log content here");
21-
}
2217

2318
BackendService(Logger this._logger);
19+
20+
Future<List> getAll(type) {
21+
// TODO get from the database
22+
if (type == Hero) return new Future.value(_mockHeroes);
23+
24+
var msg = 'Cannot get object of this type';
25+
_logger.error(msg);
26+
throw new Exception(msg);
27+
}
2428
}

‎public/docs/_examples/architecture/dart/lib/hero.dart

+3-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
// #docregion
21
class Hero {
32
static int _nextId = 1;
4-
int id;
5-
String name;
6-
String power;
3+
final int id;
4+
String name, power;
75

8-
Hero(this.name, {this.power}) {
9-
id = _nextId++;
10-
}
6+
Hero(this.name, [this.power = '']) : id = _nextId++;
117
}

‎public/docs/_examples/architecture/dart/lib/hero_detail_component.dart

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
// #docregion
21
import 'package:angular2/core.dart';
32

43
import 'hero.dart';
54

6-
@Component(selector: 'hero-detail', templateUrl: 'hero_detail_component.html')
5+
@Component(
6+
selector: 'hero-detail',
7+
templateUrl: 'hero_detail_component.html')
78
class HeroDetailComponent {
8-
@Input() Hero hero;
9+
@Input()
10+
Hero hero;
911
}

‎public/docs/_examples/architecture/dart/lib/hero_detail_component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<h4>{{hero.name}} Detail</h4>
33
<div>Id: {{hero.id}}</div>
44
<div>Name:
5-
<!-- #docregion ng-model -->
6-
<input [(ngModel)]="hero.name"></div>
7-
<!-- #enddocregion ng-model -->
8-
<div>Power:<input [(ngModel)]="hero.power">
5+
<!-- #docregion ngModel -->
6+
<input [(ngModel)]="hero.name">
7+
<!-- #enddocregion ngModel -->
98
</div>
9+
<div>Power:<input [(ngModel)]="hero.power"></div>

‎public/docs/_examples/architecture/dart/lib/hero_list_component.dart

+16-19
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,34 @@
1-
// #docplaster
21
import 'package:angular2/core.dart';
32

43
import 'hero.dart';
54
import 'hero_detail_component.dart';
65
import 'hero_service.dart';
76

8-
// #docregion metadata
9-
// #docregion providers
7+
// #docregion metadata, providers
108
@Component(
11-
// #enddocregion providers
9+
// #enddocregion providers
1210
selector: 'hero-list',
1311
templateUrl: 'hero_list_component.html',
1412
directives: const [HeroDetailComponent],
15-
// #docregion providers
13+
// #docregion providers
1614
providers: const [HeroService])
17-
// #enddocregion providers
18-
// #enddocregion metadata
19-
/*
20-
// #docregion metadata, providers
21-
class HeroListComponent { ... }
22-
// #enddocregion metadata, providers
23-
*/
2415
// #docregion class
25-
class HeroListComponent {
16+
class HeroListComponent implements OnInit {
17+
// #enddocregion metadata, providers
18+
final HeroService _heroService;
2619
List<Hero> heroes;
2720
Hero selectedHero;
28-
// #docregion ctor
29-
HeroListComponent(HeroService heroService) {
30-
heroes = heroService.getHeroes();
21+
22+
// #docregion ctor
23+
HeroListComponent(this._heroService);
24+
// #enddocregion ctor
25+
26+
void ngOnInit() {
27+
heroes = _heroService.getHeroes();
3128
}
32-
// #enddocregion ctor
33-
selectHero(Hero hero) {
29+
30+
void selectHero(Hero hero) {
3431
selectedHero = hero;
3532
}
33+
// #docregion metadata, providers
3634
}
37-
// #enddocregion class

‎public/docs/_examples/architecture/dart/lib/hero_list_component.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<!-- #docregion -->
22
<h2>Hero List</h2>
33

4-
<div *ngFor="let hero of heroes" (click)="selectHero(hero)">
5-
{{hero.name}}
6-
</div>
4+
<p><i>Pick a hero from the list</i></p>
5+
<ul>
6+
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
7+
{{hero.name}}
8+
</li>
9+
</ul>
710

811
<hero-detail *ngIf="selectedHero != null" [hero]="selectedHero"></hero-detail>

‎public/docs/_examples/architecture/dart/lib/hero_list_component_1.html

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
<!--#docregion binding -->
2-
<div ... >{{hero.name}}</div>
3-
<hero-detail ... [hero]="selectedHero"></hero-detail>
4-
<div ... (click)="selectHero(hero)">...</div>
2+
<li>{{hero.name}}</li>
3+
<hero-detail [hero]="selectedHero"></hero-detail>
4+
<li (click)="selectHero(hero)"></li>
55
<!--#enddocregion binding -->
66

77
<!--#docregion structural -->
8-
<div *ngFor="let hero of heroes" ...>...</div>
9-
<hero-detail *ngIf="selectedHero != null" ...></hero-detail>
10-
<!--#enddocregion structural -->
8+
<li *ngFor="let hero of heroes"></li>
9+
<hero-detail *ngIf="selectedHero != null"></hero-detail>

‎public/docs/_examples/architecture/dart/lib/hero_service.dart

+9-5
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,20 @@ import 'backend_service.dart';
44
import 'hero.dart';
55
import 'logger_service.dart';
66

7-
// #docregion class
87
@Injectable()
8+
// #docregion class
99
class HeroService {
1010
final BackendService _backendService;
1111
final Logger _logger;
12-
HeroService(Logger this._logger, BackendService this._backendService);
12+
final List<Hero> heroes = [];
13+
14+
HeroService(this._logger, this._backendService);
15+
1316
List<Hero> getHeroes() {
14-
List<Hero> heroes = _backendService.getAll(Hero);
15-
_logger.log('Got ${heroes.length} heroes from the server.');
17+
_backendService.getAll(Hero).then((heroes) {
18+
_logger.log('Fetched ${heroes.length} heroes.');
19+
this.heroes.addAll(heroes); // fill cache
20+
});
1621
return heroes;
1722
}
1823
}
19-
// #enddocregion class

‎public/docs/_examples/architecture/dart/lib/logger_service.dart

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1-
// #docregion
21
import 'dart:html';
32

43
import 'package:angular2/core.dart';
54

6-
/// A service for logging messages of various types.
7-
///
8-
/// We could switch this implementation to use package:logging.
95
@Injectable()
6+
// #docregion class
107
class Logger {
118
void log(Object msg) => window.console.log(msg);
12-
139
void error(Object msg) => window.console.error(msg);
14-
1510
void warn(Object msg) => window.console.warn(msg);
1611
}

‎public/docs/_examples/architecture/dart/lib/sales_tax_component.dart

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import 'package:angular2/core.dart';
2+
3+
import 'sales_tax_service.dart';
4+
import 'tax_rate_service.dart';
5+
6+
@Component(
7+
selector: 'sales-tax',
8+
template: '''
9+
<h2>Sales Tax Calculator</h2>
10+
Amount: <input #amountBox (input)="0" type="number">
11+
12+
<div *ngIf="amountBox.value != ''">
13+
The sales tax is
14+
{{ getTax(amountBox.value) | currency:'USD':false:'1.2-2' }}
15+
<!-- would like to write currency:'USD':true:'1.2-2' but
16+
currency as symbol is not currently supported; see
17+
https://github.com/dart-lang/intl/issues/59 -->
18+
</div>
19+
''',
20+
providers: const [SalesTaxService, TaxRateService])
21+
class SalesTaxComponent {
22+
SalesTaxService _salesTaxService;
23+
24+
SalesTaxComponent(this._salesTaxService) {}
25+
26+
num getTax(dynamic /* String | num */ value) =>
27+
this._salesTaxService.getVAT(value);
28+
}

‎public/docs/_examples/architecture/dart/lib/sales_tax_service.dart

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import 'package:angular2/core.dart';
2+
3+
import 'tax_rate_service.dart';
4+
5+
@Injectable()
6+
class SalesTaxService {
7+
TaxRateService rateService;
8+
9+
SalesTaxService(this.rateService);
10+
11+
num getVAT(dynamic /* String | num */ value) =>
12+
rateService.getRate('VAT') *
13+
(value is num ? value : num.parse(value, (_) => 0));
14+
}

‎public/docs/_examples/architecture/dart/lib/tax_rate_service.dart

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import 'package:angular2/core.dart';
2+
3+
@Injectable()
4+
class TaxRateService {
5+
getRate(String rateName) => 0.10;
6+
}

‎public/docs/_examples/architecture/dart/web/index.html

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Intro to Angular 2</title>
5-
<link rel="stylesheet" href="styles.css">
6-
<script defer src="main.dart" type="application/dart"></script>
7-
<script defer src="packages/browser/dart.js"></script>
8-
</head>
3+
<head>
4+
<title>Architecture of Angular 2</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="styles.css">
8+
9+
<script defer src="main.dart" type="application/dart"></script>
10+
<script defer src="packages/browser/dart.js"></script>
11+
</head>
912
<body>
10-
<hero-list>Loading...</hero-list>
13+
<my-app>Loading...</my-app>
1114
</body>
1215
</html>

‎public/docs/_examples/architecture/dart/web/main.dart

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
// #docregion
22
import 'package:angular2/platform/browser.dart';
3-
3+
// #docregion import
4+
import 'package:developer_guide_intro/app_component.dart';
5+
// #enddocregion import
46
import 'package:developer_guide_intro/backend_service.dart';
5-
import 'package:developer_guide_intro/hero_list_component.dart';
67
import 'package:developer_guide_intro/hero_service.dart';
78
import 'package:developer_guide_intro/logger_service.dart';
89

9-
main() {
10+
void main() {
1011
// #docregion bootstrap
11-
bootstrap(HeroListComponent, [BackendService, HeroService, Logger]);
12+
bootstrap(AppComponent, [BackendService, HeroService, Logger]);
1213
// #enddocregion bootstrap
1314
}

0 commit comments

Comments
 (0)