Dart Example

Just another WordPress site

AngularDart

AngularDart v4 Http Chain,Parallel,Loop

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 'dart:async';
import 'dart:convert';

import 'package:angular/angular.dart';
import 'package:http/browser_client.dart';

@Component(
    selector: 'my-app',
    template: '''
    <strong>3 http request chain</strong><br />
    <button (click)="chain()">send</button><br />
    <ul>
      <li *ngFor="let item of results1">
        <span>{{item}}</span>
      </li>
    </ul>
    <strong>3 http request parallel</strong><br />
    <button (click)="para()">send</button><br />
    <ul>
      <li *ngFor="let item of results2">
        <span>{{item.body}}</span>
      </li>
    </ul>
    <strong>3 http request loop</strong><br />
    <button (click)="loop()">send</button><br />
    <ul>
      <li *ngFor="let item of results3">
        <span>{{item.body}}</span>
      </li>
    </ul>
    ''',
    directives: const [CORE_DIRECTIVES],
    pipes: const [COMMON_PIPES]
)
class AppComponent {
  var client = new BrowserClient();
  List results1 = [];
  List results2 = [];
  List results3 = [];
  String _url;
  String _url1;
  String _url2;
  List _https = [];

  void chain() async {
    _url = "http://localhost/ngdart/ng4/sample/q_chain_server.php?first=5";
    await client.get(_url)
    .then((response) {
      results1.add(response.body);
      _url = "http://localhost/ngdart/ng4/sample/q_chain_server.php?second=1";
      client.get(_url)
      .then((response) {
        results1.add(response.body);
        _url = "http://localhost/ngdart/ng4/sample/q_chain_server.php?third=3";
        client.get(_url)
        .then((response) {
          results1.add(response.body);
        });
      });
    })
    .whenComplete(client.close);
  }

  void para() async {
    _url = "http://localhost/ngdart/ng4/sample/q_chain_server.php?first=5";
    _url1 = "http://localhost/ngdart/ng4/sample/q_chain_server.php?second=1";
    _url2 = "http://localhost/ngdart/ng4/sample/q_chain_server.php?third=3";
    await Future.wait([client.get(_url),client.get(_url1),client.get(_url2)])
    .then((List responses) => results2.addAll(responses))
    .catchError((e) => _handleError(e));
  }

  void loop() async {
    _url = "http://localhost/ngdart/ng4/sample/q_loop_server.php?init=1";
    await client.get(_url)
    .then((response) {
      List tmp = JSON.decode(response.body);
      int total = tmp.length;
      for(var i=0; i < total;i++) {
        _url = "http://localhost/ngdart/ng4/sample/q_loop_server.php?" + tmp[i][0];
        var http = client.get(_url);
        _https.add(http);
      }
    });
    await Future.wait(_https)
    .then((List responses) {
      results3.addAll(responses);
    })
    .catchError((e) => _handleError(e));
  }
  Exception _handleError(dynamic e) {
    print(e); // for demo purposes only
    return new Exception('Server error; cause: $e');
  }
}

void main() {
  bootstrap(AppComponent, [provide(BrowserClient, useFactory: () => new BrowserClient(), deps: [])]
  );
}