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 'package:angular_forms/angular_forms.dart';
import 'memberitem_component.dart';
@Component(
selector: 'my-app',
template: '''
<strong>Member List</strong>
<ul>
<li *ngFor="let member of members">
<member-item [item]="member"
(done)="removeItem(\$event)"></member-item>
</li>
</ul>
''',
directives: const [CORE_DIRECTIVES,MemberItem]
)
class AppComponent {
List<Member> members = [
new Member(1,'John'),
new Member(2,'Jessie'),
new Member(3,'Peter'),
new Member(4,'Erika'),
new Member(5,'Tom'),
new Member(6,'Betty'),
];
void removeItem(id) {
for(var i=0; i<this.members.length; i++){
if(this.members[i].id == id){
this.members.removeAt(i);
}
}
}
}
class Member {
int id;
String name;
Member(this.id,this.name);
}
void main() {
bootstrap(AppComponent);
}
(memberitem_component.dart)
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Component(
selector: 'member-item',
template: '''
<span class="badge">{{item.id}}</span> {{item.name}}
<button class="btn btn-default btn-xs"
(click)="doneClicked()">Delete</button>
''',
directives: const [CORE_DIRECTIVES]
)
class MemberItem {
@Input() Member item;
final _onDone = new StreamController.broadcast();
@Output()
Stream get done => _onDone.stream;
void doneClicked() {
_onDone.add(this.item.id);
}
}
class Member {
int id;
String name;
Member(this.id,this.name);
}