Loading…
(html)
<head>
.....
<script defer src="main.dart" type="application/dart"></script>
<script defer src="packages/browser/dart.js"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
(pubspec.yaml)
.....
environment:
sdk: '>=1.24.0 <2.0.0'
dependencies:
angular: ^4.0.0
angular_forms: ^1.0.0
angular_router: ^1.0.2
http: ^0.11.0
stream_transform: ^0.0.6
dev_dependencies:
angular_test: ^1.0.0
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
mockito: ^2.0.2
test: ^0.12.21
transformers:
- angular:
entry_points:
- web/main.dart
- test/**_test.dart
- test/pub_serve:
$include: test/**_test.dart
- dart_to_js_script_rewriter
(main.dart)
import 'dart:async';
import 'package:angular/angular.dart';
import 'pow_pipe.dart';
@Component(
selector: 'my-app',
template: '''
<strong>Async Pipe</strong><br />
<button (click)="click1()">async pipe</button>
<p>{{ result1 | async }}</p>
<button (click)="click2()">not async pipe</button>
<p>{{ result2 }}</p>
<strong>impure Custom Pipe</strong><br />
<p>value:11 exponential:2 {{11 | pow: 2 }}</p>
<p>value:12 exponential:2 {{12 | pow: 2 }}</p>
<p>value:13 exponential:2 {{13 | pow: 2 }}</p>
''',
directives: const [CORE_DIRECTIVES],
pipes: const [COMMON_PIPES,PowPipe]
)
class AppComponent {
Future<String> result1;
Future<String> result2;
Future click1() {
result1 = new Future.delayed(const Duration(seconds: 2), () => "completed!");
}
Future click2() {
result2 = new Future.delayed(const Duration(seconds: 2), () => "completed!");
}
}
void main() {
bootstrap(AppComponent);
}
(pow_pipe.dart)
import 'dart:async';
import 'dart:math' as math;
import 'package:angular/angular.dart';
@Pipe('pow', pure: false)
class PowPipe extends PipeTransform{
int _fetchedValue;
int transform(int value, int exponent) {
const TIMEOUT = const Duration(seconds: 2);
new Timer(TIMEOUT, () => _fetchedValue = math.pow(value ?? 0, exponent ?? 1));
return _fetchedValue;
}
}