Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Angular2 Dart - Hello world

More than 3 years have passed since last update.

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

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

Hello world

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

pubspec.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

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にアクセスすると下記のようになります。

Screenshot.png

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

あとがき

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

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

hayassh
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away