第6回ではルーティングについて解説しました。最終回の第7回はアプリのデプロイについて解説します。Angularのトランスフォーマーとpubのserve
やbuild
を使って、モダンブラウザで実行可能なJavaScriptファイルを作成します。
今回の元記事は7. Deploying Your Appです。
Angularのトランスフォーマーを使う
AngularDartのアプリケーションをJavaScriptに変換する前に、pubspec.yaml
にAngularDartのトランスフォーマーを使うことを書く必要があります。
transformers:
- angular
トランスフォーマーについてはPub Assets and Transformersを参照してください。
Componentで使うHTMLやCSSもトランスフォーマーで宣言しておくのを忘れないようにしましょう。
サンプルアプリをDartium以外で動かす
今回はアプリケーションに変更は加えないので、第6回と同じソースコードを使います。
こちらからリポジトリをクローンして、Chapter_06ディレクトリで> pub serve
すればサンプルアプリが起動します。
これまではおそらくDartiumでアプリケーションを実行していたと思いますが、今回はChromeやFirefoxなどのモダンブラウザで開いてみましょう。pub serve
はブラウザがDartに対応していない場合、JavaScriptを生成してアプリケーションを実行します。JavaScriptの生成には大体30秒ほどかかりますが、一度生成したJavaScriptはキャッシュされ、次回からはすぐに実行できます。
マルチブラウザ対応
以前にも少しだけ触れましたが、AngularのコンポーネントはShadow DOMを使っています。これをマルチブラウザに対応させるには次のポリフィルが必要です。
<script src="packages/web_components/webcomponents.min.js"></script>
<script src="packages/web_components/dart_support.js"></script>
デプロイ可能なファイルの生成
pub build
を実行すると、デプロイ可能なアプリケーションのファイルがbuild/web
以下に生成されます。
まとめ
-
pubspec.yaml
にAngularのトランスフォーマーを記述する -
pub serve
は自動でJavaScriptを生成して実行する - デプロイするファイルは
pub build
で生成する
これで本家チュートリアルのすべての内容は終わりです。ここから先はAPIドキュメントやフォーラム、Issueなどと格闘してAngularDartを使いこなしましょう。お疲れ様でした!