--- title: Angular2 Dart - Hello world tags: Dart AngularDart author: hayassh slide: false --- Qiita初投稿です。 いきなりですがとても興味深いニュースが飛び込んできました。 - [AngularDart is going all Dart](http://news.dartlang.org/2016/07/angulardart-is-going-all-dart.html) - [Angular 2のコードベースがDart版とTypeScript/JavaScript版に分割、Dart版Angularの専従チームも](http://news.dartlang.org/2016/07/angulardart-is-going-all-dart.html) 今まではTS版のリリースと同じタイミングでDart版もリリースされてたのにRCが出てからピタッとDart版がリリースされなくなってたのはこういう理由だったんですね。 # Hello world というわけで早速Hello worldです。 今回のソースコードは[こちら](https://github.com/takayuki-hayashi/angular2-dart-examples/tree/master/angular-example01)です。 ## pubspec.yaml ```yaml: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 ```html:web/index.html angular_sample01 ``` scriptタグは2つ。main.dartはWebアプリのエントリーポイントみたいなものです。 そしてもうひとつのdart.jsを指定したダグを書いておくとpubspec.yamlにて依存関係に追加したdart_to_js_script_rewriterがプロダクションモード(pub build)時に本アプリケーションのJSをいい感じで出力してくれた上で上記2つのscriptタグを消去してくれます(DartVMがブラウザに搭載されない事が決定した今、上記タグはプロダクションモードでは必要ないですしね) ``は別途作成するComponentにて指定するselectorの文字列になります。 ## main.dart ```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 ```dart:lib/app.dart import 'package:angular2/core.dart'; @Component(selector: 'app', templateUrl: 'app.html') class App {} ``` さてComponentです。アノテーションの属性であるselectorに記述した文字列がComponentの名前になり、index.html内の``で定義可能になります。templateUrlに指定するのはComponentと対となるhtmlです。また、今回は単にhello world表示だけなのでAppクラスには何もメソッドは定義していません。 ## app.html ```html:lib/app.html

Hello world

``` この状態で `pub serve` を実行した後にhtt://localhost:8080にアクセスすると下記のようになります。 ![Screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/134650/fdd82ad6-f8b7-0764-5a57-492723592a12.png) まあ、普通のhello worldですw とりあえず今回は以上で。 ###あとがき 今までPolymer Dartを使ってWebアプリを作っていましたが、ニュースを見てAngular2Dartを本格的に使おうと思い、今後も備忘録も兼ねてQiitaに書き溜めて行こうかなと思っています。 ちょいちょいDartを仕事でも使っているのですがWebフレームワークは[Polymer Dart](https://github.com/dart-lang/polymer-dart)を使っていました。しかしこのFWはDIが無かったりも含めてかなりライトな感じです。それはそれで良い特徴なのですが、やはりそれなりのWebアプリを作るとなるといろいろ物足りない感がしていたし、polymer0.16系と1.0RC系はかなり書き方が変わったのでどうせいろいろ新しく覚えるなら開発の活発なAngular2 Dartにしようと思います。