AngularDart入門 第1回 はじめてのAngularDart

[前回](http://qiita.com/laco0416/items/c9f2d1db9f8584a44ebe)は入門と言いながらいきなりComponentを使ったりいろいろと省略したりさんざんだったので、もう一度1から入門記事をスタートします。~~[本家のチュートリアル記事](https://angulardart.org/tutorial/)がバージョン0.10.0版なので、内容ほとんどそのままに、バージョン1.0に対応させて書いていきます。~~

>[追記]
1.1.0に対応しました。
公式チュートリアルが1.*系に対応している（と書いている）のですが、一部古い記述もあるのでやはりAPIリファレンスや、その他の情報を合わせて書くしかないです。

今回の元記事は[1. Creating Your First Angular App](https://angulardart.org/tutorial/03-ch01-creating-your-first-app.html)です。

# まずはサンプルアプリを動かしてみよう
[こちら](https://github.com/angular/angular.dart.tutorial/tree/master/Chapter_01)にサンプルアプリのソースコードがあります。リポジトリをクローンして、**Chapter_01**ディレクトリで`> pub serve`すればサンプルアプリが起動します。

![Imgur](http://i.imgur.com/41iL416.png)

inputにいれたテキストがリアルタイムに上のヘッダーに反映されます。これがバインディングです。

# セットアップ
AngularDartを使うためには、まず`pubspec.yaml`に依存関係を記述します。

```yaml:pubspec.yaml
name: angular_sample
dependencies:
  browser: any
  angular: ">=1.1.0 <1.2.0"
  web_components: any
transformers:
- angular
```

>[追記]
1.0→1.1の変更も大きかったので安全のために1.1固定したほうがいいと思います。

AngularDartを使うためには`angular`パッケージへの依存を記述します。web_componentsはWeb Componentsに対応していない古いブラウザに対するポリフィルのパッケージです。外してもいいですが、その場合は後述のHTML内のweb_components依存部分を削除してください。

# アプリケーション作成
このサンプルアプリケーションは

- index.html
- main.dart

の2つのファイルからなっています。はじめに`index.html`を記述します。

```html:web/index.html
<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>

    <script src="packages/web_components/webcomponents.min.js.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
</head>
<body>

<h3>Hello {{name}}!</h3>
Name: <input type="text" ng-model="name">

<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
```

>[追記]
web_components/platform.jsはweb_components/webcomponents.jsに名前が変わりました。役割がわかりやすくなって良くなりましたが、DartiumやChromeではもともとWeb Componentsに対応していてこの変更によるエラーに気付きにくいので注意です。

`<html ng-app>`とすることで、Angularはこのhtml要素がアプリケーションの最上位の要素であることを認識します。

```html
    <script src="packages/web_components/webcomponents.min.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
```

この部分はweb_components依存なので、pubspec.yamlから外した場合は消してください。

```html
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
```

アプリケーションの本体である`main.dart`と、Dartium以外のブラウザで開いた時用のポリフィルの`packages/browser/dart.js`は`<body>`の最後で宣言します。`<body>`内で呼び出された`main.dart`はエントリポイントである`void main()`を実行します。

実行される`main.dart`はこのように記述します。

```dart:main.dart
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

void main() {
  applicationFactory().run();
}
```

```dart
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
```

AngularDartの実行に必要なライブラリ2つをimportしています。エントリポイントである`main.dart`では必ずこの2つのライブラリをimportします。

```dart
void main() {
  applicationFactory().run();
}
```

エントリポイント`main()`でAngularDartのアプリケーションを作成し、開始しています。これが最小の処理です。

# まとめ

- AngularDartのパッケージは`angular`
- `<html ng-app>`を忘れずに
- importするライブラリは2つ
- `applicationFactory().run()`でAngularのバインディング開始

[第2回](http://qiita.com/laco0416/items/d8cbc50e15b39ce9be35)は[2. Something More than “Hello World”](https://angulardart.org/tutorial/04-ch02-component.html)を元にバージョン1.0に置き換えて解説します。