LoginSignup
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-10-25

前回は入門と言いながらいきなりComponentを使ったりいろいろと省略したりさんざんだったので、もう一度1から入門記事をスタートします。本家のチュートリアル記事がバージョン0.10.0版なので、内容ほとんどそのままに、バージョン1.0に対応させて書いていきます。

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

今回の元記事は1. Creating Your First Angular Appです。

まずはサンプルアプリを動かしてみよう

こちらにサンプルアプリのソースコードがあります。リポジトリをクローンして、Chapter_01ディレクトリで> pub serveすればサンプルアプリが起動します。

Imgur

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

セットアップ

AngularDartを使うためには、まずpubspec.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を記述します。

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要素がアプリケーションの最上位の要素であることを認識します。

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

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

<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はこのように記述します。

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

void main() {
  applicationFactory().run();
}
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

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

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

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

まとめ

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

第2回2. Something More than “Hello World”を元にバージョン1.0に置き換えて解説します。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13