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 'package:angular/angular.dart';
import 'orderby_pipe.dart';
@Component(
selector: 'my-app',
template: '''
<table class="table">
<thead>
<tr><th>Product Name</th><th>Product Price</th></tr>
</thead>
<tbody>
<tr *ngFor="let item of products | orderby: key">
<td>{{item["name"]}}</td>
<td>{{item["price"] | currency:'JPY':true}}</td>
</tr>
</tbody>
</table>
''',
directives: const [CORE_DIRECTIVES],
pipes: const [COMMON_PIPES, OrderbyPipe]
)
class AppComponent {
List<Map> products = [
{ "name": "digital camera-A","price": 8500},
{ "name": "digital camera-D","price": 3500},
{ "name": "computer-B" ,"price": 15900},
{ "name": "digital camera-B","price": 9800},
{ "name": "computer-D" ,"price": 5900},
{ "name": "computer-C" ,"price": 25900},
{ "name": "computer-A" ,"price": 14900}
];
String key = 'price';
}
void main() {
bootstrap(AppComponent);
}
(orderby_pipe.dart)
import 'package:angular/angular.dart';
@Pipe('orderby')
class OrderbyPipe extends PipeTransform {
List<Map> transform(List<Map> array, String key) {
array.sort((Map a, Map b) {
if (a[key] < b[key]) {
return -1;
} else if (a[key] > b[key]) {
return 1;
} else {
return 0;
}
});
return array;
}
}