- AngularDart : 4.0.0
- Dart : 1.24.1
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
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
@Component(
selector: 'my-app',
template: '''
<strong>1)DatePipe</strong><br />
<p>new DateTime(1988, 4, 15) {{ birthday | date:"yMMdd" }}</p>
<strong>2)DecimalPipe</strong><br />
<p>3.141592：(3.2-4): {{3.141592 | number:'3.2-4'}}</p>
<p>3.1 ：(3.2-4): {{3.1 | number:'3.2-4'}}</p>
<p>3.141592：(1.1-1): {{3.141592 | number:'1.1-1'}}</p>
<p>12345 (number): {{12345 | number}}</p>
<strong>3)CurrencyPipe</strong><br />
<p>51259: {{51259 | currency:'JPY':false}}</p>
<p>15315731: {{15315731 | currency:'JPY':true}}</p>
<strong>4)JsonPipe</strong><br />
<p>Not JsonPipe</p>
<pre>{{object}}</pre>
<p>JsonPipe</p>
<pre>{{object | json}}</pre>
<strong>5)SlicePipe</strong><br />
<select (change)="start=\$event.target.value" >
<option *ngFor="let index of indexes" [value]=index>{{index}}</option>
</select>:
<select (change)="end=\$event.target.value" >
<option *ngFor="let index of indexes" [value]=index>{{index}}</option>
</select>
<ul>
<li *ngFor="let i of collection | slice:conv(start):conv(end)">{{i}}</li>
</ul>
''',
directives: const [CORE_DIRECTIVES, formDirectives],
pipes: const [COMMON_PIPES]
)
class AppComponent {
DateTime birthday = new DateTime(1988, 4, 15);
int start = 0;
int end = 10;
int i;
int conv(idx) {
if(idx is String) {
this.i = int.parse(idx);
} else {
this.i = idx;
}
return this.i;
}
List collection = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
List indexes = [0,1,2,3,4,5,6,7,8,9];
Map object = {'foo': 'bar', 'nested': {'numbers': [1, 2]}};
}
void main() {
bootstrap(AppComponent);
}