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

Commit 6ee3756

Browse files
adaojuniorkwalrath
adaojunior
authored and
kwalrath
committed
docs(guide/structural-directives): add Dart version of example
closes #701
1 parent 45ac0ee commit 6ee3756

File tree

7 files changed

+229
-0
lines changed

7 files changed

+229
-0
lines changed

‎public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// #docregion
2+
import 'package:angular2/angular2.dart';
3+
import 'dart:async';
4+
5+
int nextId = 1;
6+
7+
@Component(
8+
selector: 'heavy-loader',
9+
template: '<span>heavy loader #{{id}} on duty!</span>')
10+
class HeavyLoaderComponent implements OnInit, OnDestroy {
11+
int id = nextId++;
12+
@Input() List<String> logs;
13+
14+
// Mock todo: get 10,000 rows of data from the server
15+
ngOnInit() => _log(
16+
"heavy-loader $id initialized, loading 10,000 rows of data from the server");
17+
18+
// Mock todo: clean-up
19+
ngOnDestroy() => _log("heavy-loader $id destroyed, cleaning up");
20+
21+
_log(String msg) {
22+
logs.add(msg);
23+
_tick();
24+
}
25+
26+
/// Triggers the next round of Angular change detection
27+
/// after one turn of the browser event loop
28+
/// ensuring display of msg added in onDestroy
29+
_tick() => new Future(() {});
30+
}
31+
// #enddocregion

‎public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// #docplaster
2+
// #docregion
3+
import 'package:angular2/angular2.dart';
4+
import 'unless_directive.dart';
5+
import 'heavy_loader_component.dart';
6+
7+
@Component(
8+
selector: 'structural-directives',
9+
templateUrl: 'structural_directives_component.html',
10+
styles: const ['button { min-width: 100px; }'],
11+
directives: const [UnlessDirective, HeavyLoaderComponent])
12+
class StructuralDirectivesComponent {
13+
List<String> heroes = ['Mr. Nice', 'Narco', 'Bombasto'];
14+
bool condition = true;
15+
bool isVisible = true;
16+
List<String> logs = [];
17+
String status = 'ready';
18+
19+
get hero => heroes[0];
20+
}
21+
//#enddocregion

‎public/docs/_examples/structural-directives/dart/lib/structural_directives_component.html

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion -->
3+
<h1>Structural Directives</h1>
4+
5+
<!-- #docregion structural-directives -->
6+
<!-- #docregion asterisk -->
7+
<div *ngIf="hero != null">{{hero}}</div>
8+
<div *ngFor="#hero of heroes">{{hero}}</div>
9+
<!-- #enddocregion asterisk -->
10+
<!-- #docregion ngSwitch -->
11+
<div [ngSwitch]="status">
12+
<template [ngSwitchWhen]="'in-mission'">In Mission</template>
13+
<template [ngSwitchWhen]="'ready'">Ready</template>
14+
<template ngSwitchDefault>Unknown</template>
15+
</div>
16+
<!-- #enddocregion ngSwitch -->
17+
<!-- #enddocregion structural-directives -->
18+
19+
<hr>
20+
21+
<button
22+
(click)="condition = !condition"
23+
[style.background] = "condition ? 'orangered': 'lightgreen'"
24+
>
25+
Set 'condition' to {{condition ? 'False': 'True'}}
26+
</button>
27+
28+
<!-- #docregion ngIf -->
29+
<p *ngIf="condition">
30+
condition is true and ngIf is true.
31+
</p>
32+
<p *ngIf="!condition">
33+
condition is false and ngIf is false.
34+
</p>
35+
<!-- #enddocregion ngIf -->
36+
<!-- #docregion myUnless-->
37+
<p *myUnless="condition">
38+
condition is false and myUnless is true.
39+
</p>
40+
41+
<p *myUnless="!condition">
42+
condition is true and myUnless is false.
43+
</p>
44+
<!-- #enddocregion myUnless-->
45+
46+
<hr>
47+
48+
<!-- #docregion message-log -->
49+
<div><!-- Visibility -->
50+
<button (click)="isVisible = !isVisible">show | hide</button>
51+
<heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
52+
</div>
53+
54+
<div><!-- NgIf -->
55+
<button (click)="condition = !condition">if | !if</button>
56+
<heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
57+
</div>
58+
59+
<h4>heavy-loader log:</h4>
60+
<div *ngFor="#message of logs">{{message}}</div>
61+
<!-- #enddocregion message-log -->
62+
63+
<hr>
64+
65+
<!-- #docregion template-tag -->
66+
<p>
67+
Hip!
68+
</p>
69+
<template>
70+
<p>
71+
Hip!
72+
</p>
73+
</template>
74+
<p>
75+
Hooray!
76+
</p>
77+
<!-- #enddocregion template-tag -->
78+
79+
<hr>
80+
81+
<!-- #docregion ngIf-template -->
82+
<!-- Examples (A) and (B) are the same -->
83+
<!-- (A) *ngIf paragraph -->
84+
<p *ngIf="condition">
85+
Our heroes are true!
86+
</p>
87+
88+
<!-- (B) [ngIf] with template -->
89+
<template [ngIf]="condition">
90+
<p>
91+
Our heroes are true!
92+
</p>
93+
</template>
94+
<!-- #enddocregion ngIf-template -->
95+
96+
<hr>
97+
98+
<!-- #docregion ngFor-template -->
99+
<!-- Examples (A) and (B) are the same -->
100+
101+
<!-- (A) *ngFor div -->
102+
<div *ngFor="#hero of heroes">{{ hero }}</div>
103+
104+
<!-- (B) ngFor with template -->
105+
<template ngFor #hero [ngForOf]="heroes">
106+
<div>{{ hero }}</div>
107+
</template>
108+
<!-- #enddocregion ngFor-template -->
109+
<!-- #enddocregion -->

‎public/docs/_examples/structural-directives/dart/lib/unless_directive.dart

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion unless-declaration
4+
import 'package:angular2/angular2.dart';
5+
// #enddocregion unless-declaration
6+
7+
// #docregion unless-declaration
8+
@Directive(selector: '[myUnless]')
9+
class UnlessDirective {
10+
// #enddocregion unless-declaration
11+
12+
// #docregion unless-constructor
13+
TemplateRef _templateRef;
14+
ViewContainerRef _viewContainer;
15+
16+
UnlessDirective(this._templateRef, this._viewContainer);
17+
// #enddocregion unless-constructor
18+
19+
// #docregion unless-set
20+
@Input()
21+
set myUnless(bool condition) {
22+
if (!condition) {
23+
_viewContainer.createEmbeddedView(_templateRef);
24+
} else {
25+
_viewContainer.clear();
26+
}
27+
}
28+
// #enddocregion unless-set
29+
// #docregion unless-declaration
30+
}
31+
// #enddocregion unless-declaration
32+
// #enddocregion

‎public/docs/_examples/structural-directives/dart/pubspec.yaml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
name: structural_directives
2+
description: Structural directives example
3+
version: 0.0.1
4+
environment:
5+
sdk: '>=1.13.0 <2.0.0'
6+
dependencies:
7+
angular2: 2.0.0-beta.1
8+
browser: ^0.10.0
9+
dart_to_js_script_rewriter: ^0.1.0
10+
transformers:
11+
- angular2:
12+
platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
13+
entry_points: web/main.dart
14+
- dart_to_js_script_rewriter

‎public/docs/_examples/structural-directives/dart/web/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<!-- #docregion -->
3+
<html>
4+
5+
<head>
6+
<title>Angular 2 Structural Directives</title>
7+
<script defer src="main.dart" type="application/dart"></script>
8+
<script defer src="packages/browser/dart.js"></script>
9+
</head>
10+
11+
<body>
12+
<structural-directives>Loading...</structural-directives>
13+
</body>
14+
15+
</html>

‎public/docs/_examples/structural-directives/dart/web/main.dart

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// #docregion
2+
import 'package:angular2/bootstrap.dart';
3+
import 'package:structural_directives/structural_directives_component.dart';
4+
5+
main() {
6+
bootstrap(StructuralDirectivesComponent);
7+
}

0 commit comments

Comments
 (0)