Dart Example

Just another WordPress site

AngularDart

AngularDart v4 Built-in pipes

AngularDart v4 Sample Code,Demo
  • 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 <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';

@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);
}