docs(guide/structural-directives): add Dart version of example

closes #701
This commit is contained in:
Adão Júnior 2016-01-14 16:23:29 -02:00 committed by Kathy Walrath
parent 45ac0ee37d
commit 6ee3756989
7 changed files with 229 additions and 0 deletions

View File

@ -0,0 +1,31 @@
// #docregion
import 'package:angular2/angular2.dart';
import 'dart:async';
int nextId = 1;
@Component(
selector: 'heavy-loader',
template: '<span>heavy loader #{{id}} on duty!</span>')
class HeavyLoaderComponent implements OnInit, OnDestroy {
int id = nextId++;
@Input() List<String> logs;
// Mock todo: get 10,000 rows of data from the server
ngOnInit() => _log(
"heavy-loader $id initialized, loading 10,000 rows of data from the server");
// Mock todo: clean-up
ngOnDestroy() => _log("heavy-loader $id destroyed, cleaning up");
_log(String msg) {
logs.add(msg);
_tick();
}
/// Triggers the next round of Angular change detection
/// after one turn of the browser event loop
/// ensuring display of msg added in onDestroy
_tick() => new Future(() {});
}
// #enddocregion

View File

@ -0,0 +1,21 @@
// #docplaster
// #docregion
import 'package:angular2/angular2.dart';
import 'unless_directive.dart';
import 'heavy_loader_component.dart';
@Component(
selector: 'structural-directives',
templateUrl: 'structural_directives_component.html',
styles: const ['button { min-width: 100px; }'],
directives: const [UnlessDirective, HeavyLoaderComponent])
class StructuralDirectivesComponent {
List<String> heroes = ['Mr. Nice', 'Narco', 'Bombasto'];
bool condition = true;
bool isVisible = true;
List<String> logs = [];
String status = 'ready';
get hero => heroes[0];
}
//#enddocregion

View File

@ -0,0 +1,109 @@
<!-- #docplaster -->
<!-- #docregion -->
<h1>Structural Directives</h1>
<!-- #docregion structural-directives -->
<!-- #docregion asterisk -->
<div *ngIf="hero != null">{{hero}}</div>
<div *ngFor="#hero of heroes">{{hero}}</div>
<!-- #enddocregion asterisk -->
<!-- #docregion ngSwitch -->
<div [ngSwitch]="status">
<template [ngSwitchWhen]="'in-mission'">In Mission</template>
<template [ngSwitchWhen]="'ready'">Ready</template>
<template ngSwitchDefault>Unknown</template>
</div>
<!-- #enddocregion ngSwitch -->
<!-- #enddocregion structural-directives -->
<hr>
<button
(click)="condition = !condition"
[style.background] = "condition ? 'orangered': 'lightgreen'"
>
Set 'condition' to {{condition ? 'False': 'True'}}
</button>
<!-- #docregion ngIf -->
<p *ngIf="condition">
condition is true and ngIf is true.
</p>
<p *ngIf="!condition">
condition is false and ngIf is false.
</p>
<!-- #enddocregion ngIf -->
<!-- #docregion myUnless-->
<p *myUnless="condition">
condition is false and myUnless is true.
</p>
<p *myUnless="!condition">
condition is true and myUnless is false.
</p>
<!-- #enddocregion myUnless-->
<hr>
<!-- #docregion message-log -->
<div><!-- Visibility -->
<button (click)="isVisible = !isVisible">show | hide</button>
<heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
</div>
<div><!-- NgIf -->
<button (click)="condition = !condition">if | !if</button>
<heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
</div>
<h4>heavy-loader log:</h4>
<div *ngFor="#message of logs">{{message}}</div>
<!-- #enddocregion message-log -->
<hr>
<!-- #docregion template-tag -->
<p>
Hip!
</p>
<template>
<p>
Hip!
</p>
</template>
<p>
Hooray!
</p>
<!-- #enddocregion template-tag -->
<hr>
<!-- #docregion ngIf-template -->
<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
Our heroes are true!
</p>
<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
<p>
Our heroes are true!
</p>
</template>
<!-- #enddocregion ngIf-template -->
<hr>
<!-- #docregion ngFor-template -->
<!-- Examples (A) and (B) are the same -->
<!-- (A) *ngFor div -->
<div *ngFor="#hero of heroes">{{ hero }}</div>
<!-- (B) ngFor with template -->
<template ngFor #hero [ngForOf]="heroes">
<div>{{ hero }}</div>
</template>
<!-- #enddocregion ngFor-template -->
<!-- #enddocregion -->

View File

@ -0,0 +1,32 @@
// #docplaster
// #docregion
// #docregion unless-declaration
import 'package:angular2/angular2.dart';
// #enddocregion unless-declaration
// #docregion unless-declaration
@Directive(selector: '[myUnless]')
class UnlessDirective {
// #enddocregion unless-declaration
// #docregion unless-constructor
TemplateRef _templateRef;
ViewContainerRef _viewContainer;
UnlessDirective(this._templateRef, this._viewContainer);
// #enddocregion unless-constructor
// #docregion unless-set
@Input()
set myUnless(bool condition) {
if (!condition) {
_viewContainer.createEmbeddedView(_templateRef);
} else {
_viewContainer.clear();
}
}
// #enddocregion unless-set
// #docregion unless-declaration
}
// #enddocregion unless-declaration
// #enddocregion

View File

@ -0,0 +1,14 @@
name: structural_directives
description: Structural directives example
version: 0.0.1
environment:
sdk: '>=1.13.0 <2.0.0'
dependencies:
angular2: 2.0.0-beta.1
browser: ^0.10.0
dart_to_js_script_rewriter: ^0.1.0
transformers:
- angular2:
platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
entry_points: web/main.dart
- dart_to_js_script_rewriter

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<!-- #docregion -->
<html>
<head>
<title>Angular 2 Structural Directives</title>
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<structural-directives>Loading...</structural-directives>
</body>
</html>

View File

@ -0,0 +1,7 @@
// #docregion
import 'package:angular2/bootstrap.dart';
import 'package:structural_directives/structural_directives_component.dart';
main() {
bootstrap(StructuralDirectivesComponent);
}