Qiita初投稿です。
いきなりですがとても興味深いニュースが飛び込んできました。

今まではTS版のリリースと同じタイミングでDart版もリリースされてたのにRCが出てからピタッとDart版がリリースされなくなってたのはこういう理由だったんですね。

Hello world

というわけで早速Hello worldです。
今回のソースコードはこちらです。

pubspec.yaml

#~~~~~
dependencies:
  angular2: 2.0.0-beta.18
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart
- dart_to_js_script_rewriter

pubspecはこんな感じです。TS版には存在しないbeta.18のバージョンです。

index.html

web/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>angular_sample01</title>
    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
  </head>
  <body>
    <app></app>
  </body>
</html>

scriptタグは2つ。main.dartはWebアプリのエントリーポイントみたいなものです。
そしてもうひとつのdart.jsを指定したダグを書いておくとpubspec.yamlにて依存関係に追加したdart_to_js_script_rewriterがプロダクションモード（pub build）時に本アプリケーションのJSをいい感じで出力してくれた上で上記2つのscriptタグを消去してくれます（DartVMがブラウザに搭載されない事が決定した今、上記タグはプロダクションモードでは必要ないですしね）
<app></app>は別途作成するComponentにて指定するselectorの文字列になります。

main.dart

web/main.dart

import 'package:angular2/platform/browser.dart';

import 'package:angular_sample01/app.dart';

main() {
  bootstrap(App);
}

DartでWebアプリを作成するときはエントリーポイントとなるmainメソッドが実行されます。
そしてAngular2 Dartではここでbootstrapメソッドを呼び出し、そこにAngular2における重要な概念であるComponentを指定します。
Angular2では沢山のComponentを作成するのですがここで指定するのは全てのコンポーネントのROOTとなるComponentです。

app.dart

lib/app.dart

import 'package:angular2/core.dart';

@Component(selector: 'app', templateUrl: 'app.html')
class App {}

さてComponentです。アノテーションの属性であるselectorに記述した文字列がComponentの名前になり、index.html内の<app></app>で定義可能になります。templateUrlに指定するのはComponentと対となるhtmlです。また、今回は単にhello world表示だけなのでAppクラスには何もメソッドは定義していません。

app.html

lib/app.html

<h1>Hello world</h1>

この状態で
pub serve
を実行した後にhtt://localhost:8080にアクセスすると下記のようになります。

まあ、普通のhello worldですｗ
とりあえず今回は以上で。

あとがき

今までPolymer Dartを使ってWebアプリを作っていましたが、ニュースを見てAngular2Dartを本格的に使おうと思い、今後も備忘録も兼ねてQiitaに書き溜めて行こうかなと思っています。

ちょいちょいDartを仕事でも使っているのですがWebフレームワークはPolymer Dartを使っていました。しかしこのFWはDIが無かったりも含めてかなりライトな感じです。それはそれで良い特徴なのですが、やはりそれなりのWebアプリを作るとなるといろいろ物足りない感がしていたし、polymer0.16系と1.0RC系はかなり書き方が変わったのでどうせいろいろ新しく覚えるなら開発の活発なAngular2 Dartにしようと思います。

Angular2 Dart - Hello world