AngularDart v4 Sample Code,Demo
- AngularDart : 4.0.0
- Dart : 1.24.1
(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
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Directive(
selector: '[myUnless]'
)
class UnlessDirective {
TemplateRef _templateRef;
ViewContainerRef _viewContainer;
UnlessDirective(this._templateRef, this._viewContainer);
@Input() set myUnless(bool condition) {
if (!condition) {
_viewContainer.createEmbeddedView(_templateRef);
} else {
_viewContainer.clear();
}
}
}
@Component(
selector: 'my-app',
template: '''
<button (click)="condition = !condition">
Set 'condition' to {{condition ? 'False': 'True'}}
</button>
<p *myUnless="condition">
(A) This paragraph is displayed because the condition is false.
</p>
<p *myUnless="!condition">
(B) This paragraph is displayed because the condition is true.
</p>
''',
directives: const [CORE_DIRECTIVES,UnlessDirective]
)
class AppComponent {
bool condition = true;
}
void main() {
bootstrap(AppComponent);
}
It’s fantastic that you are getting thoughts from this piece of
writing as well as from our dialogue made at this place.