2017年1月18日水曜日

AngularDart のチュートリアルを試してみた。

この、2年間はDart 向けのフレームワークをアレコレ行ったり来たりしていました。

私の場合だと、Web系では、dart_web_toolkit -> polymer-dart ->フルスクラッチ-> material design lite -> フルスクラッチ
アプリ系では、chrome app -> flutter -> cordova x フルスクラッチ  

しかし、そろそろ、Angular Dart と、Flutter が、そろそろ使えるようになるのではと期待しています。

で、学習を再開しました。ドンドン使ってみる。


まずは、Angular Dart の Tutorial を 試してみました。 良い感じ。とってもコードを書くのが楽になりました。
※ AngularDart 用の componentsも、だいたい揃ってる。


Data Binding とか

例えば、Dartのクラスと、Domが自動で連携してくれて便利!!
一秒ごとに、Counterを増やすような場合、以下のような感じで書ける。
https://github.com/kyorohiro/memo.dart.angular/tree/master/a002

main.dart
import 'package:angular2/platform/browser.dart';
import 'package:angular2/core.dart';
import 'dart:async';

main() {
  bootstrap(AppComponent);
}

@Component(
    selector: 'my-app',
    template: """
  <div>{{counter}}</div>
  """
)
class AppComponent implements OnInit {
  int counter = 0;

  ngOnInit() {
    new Future(() async {
      while (true) {
        await new Future.delayed(new Duration(seconds: 1));
        counter++;
      }
    });
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>a002</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
</html>

Domを検索して、そのドムの値を更新するコードを書くとか。
いらない。


他にも、アレコレと







0 件のコメント:

コメントを投稿