docs(guide/structural-directives): add Dart version of example
closes #701
This commit is contained in:
parent
45ac0ee37d
commit
6ee3756989
|
@ -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
|
|
@ -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
|
|
@ -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 -->
|
|
@ -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
|
|
@ -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
|
|
@ -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>
|
|
@ -0,0 +1,7 @@
|
|||
// #docregion
|
||||
import 'package:angular2/bootstrap.dart';
|
||||
import 'package:structural_directives/structural_directives_component.dart';
|
||||
|
||||
main() {
|
||||
bootstrap(StructuralDirectivesComponent);
|
||||
}
|
Loading…
Reference in New Issue