第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を使いこなしましょう。お疲れ様でした！