AngularJSのチュートリアルをやってみた
AngularJSのチュートリアル
chap0
ng-app ディレクティブ
ng-app ディレクティブは AngularJSがアプリケーションのルート要素とみなすHTML要素にフラグをつけるために使用する。これによってHTMLページ全体またはその一部のみをAngularJSのアプリケーションとして扱う必要があるのかどうかAngularJSに伝えることができる。
angular.js スクリプト
<script src="lib/angular/angular.js"></script> によってHTMLページがダウンロードされたときにブラウザがコールバックを登録するangular.jsスクリプトをダウンロードしている。コールバックが実行されるとAngularJSはngAppディレクティブを探しにいく。AngularJSがディレクティブを見つけると、ngAppディレクティブが定義されている要素であるアプリケーションのDOMルートでアプリケーションをブートストラップする。
バインディング
{{}} バインディングはAngularJSに式を評価して、バインディングの変わりに結果をDOMに挿入するように指示する。式の結果によって更新できるため効率的である。
char1
静的なHTMLファイルの生成。
char2
AngularJSアプリケーションでは、コードの構造化としてModel-View-Controller(MVC)デザインパターンを利用することを想定している。
View & Template
ViewはHTMLテンプレートを通したモデルの投影である。モデルが変わるたびにAngularJSが適切なバインディングを設定して、ビューが動的に更新される。
ng-repeat ディレクティブ
要素の繰り返しを表現したいときに使う。
<li ng-repeat="phone in phones"> は <li> をテンプレートとして使用して、リスト内の要素に対して <li> 要素を作成するように指示している。
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
上記はPhoneListControllerコントローラに設定されているアプリケーションのモデルを参照していることになる。
Model & Controller
ng-controller ディレクティブ
controllerで処理を記述していくイメージ。
データモデルは PhoneListController としてインスタンス化されている。コントローラは、$scope パラメータを取るコンストラクタ関数である。$scope はビューにデータを渡したり、ビューから発生したイベントを監視したり、ビューとのやり取りを実施できるオブジェクト。
PhoneListController は<body> 要素の下でDOMのサブツリーを役割を担っている。
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {}}); はPhoneListController という名前のコントローラを宣言して、AngularJSモジュールのphonecatAppに登録している。これによって ng-app ディレクティブが phonecatApp モジュール名のアプリケーションのブートストラップ時にロードするモジュールとして指定されるようになった。PhoneListControllerコントローラはコントローラ関数に注入されている $scope のデータを付与している。このコントローラスコープは <body ng-controller="PhoneListController"> タグ内にあるすべてのバインディングから使用できる。
<body ng-controller="PhoneListController"> は app.js の PhoneListController を参照する。
scope
Scope は非常に重要な概念である。scope は Model、Controller、template を連携させるための接着剤と考えることができる。Modelに加えられた変更はViewに反映される。Viewで行われた変更はモデルに反映される。
char3
テンプレート＋コントローラの組み合わせは非常に一般的なパターンなので、コンポーネント化して再利用可能にしたほうがよい。
コンポーネントを使用するためには .component() メソッドを使用する。合わせてコンポーネントの名前とコンポーネント定義オブジェクト(CDO)を提供しなければならない。新婦砂ケールでは、CDOはテンプレートとコントローラのみで構成される。(コントローラも省略は可能)
※ TODO: $ctrl はコントローラのビューモデルオブジェクト...？？
コントローラコンストラクタの this にデータとメソッドを割り当てている。
テンプレートからはエイリアスを使用してコントローラインスタンスを参照できる。
char4
リファクタリング！機能別にファイルをまとめる。<phone-list></phone-list> が示しているのは chap3 で作成したコンポーネントである。つまり phoneList として呼ばれている component(\`phoneList\', {...}) である。ここでテンプレートとなるHTMLを外部から templateUrl: 'phone-list/phone-list.template.html', として参照することで見通しがよくなる。AngularJS は phone-list.template.html からテンプレートを取得するためのリクエストを発行する。外部リクエストの管理方法は $templateRequest や $templateCache のサービスを利用することができる。
char5
コンポーネントテンプレート
標準HTMLタグの <input> タグを追加している。
データバインディング：入力ボックスの値を ngModel で指定されたデータモデル変数にバインドして同期させている。 $ctrl.query としてバインドしたデータは filter:$ctrl.query としてすぐに使用されている。データモデルを変更してrepeatの入力が変更されるとrepeatはDOMを更新して、モデルの現在の状態を反映する。filter 関数は $ctrl.query の値を使用してクエリに一致するレコードのみを含む新しい配列を生成する。 ng-repeat は filter を通して動的にビューを更新している。
char6
コンポーネントテンプレート
HTMLに <select> 要素を追加することでユーザがプルダウンで選択することができる。orderBy フィルタを用いることで入力の配列をコピーしてコピー後の配列を並び替えることができる。
コンポーネントコントローラ
age プロパティを追加している。モデルからUI、UIからモデルへの双方向データバインディングを体験できる。
char7
コンポーネントコントローラ
WebサーバにHTTPリクエストを送信するために、コントローラで $thhp サービスを使用する。サービスはAngularJSのDIサブシステムによって管理される。
※ この章ちょっと難しいが重要っぽいので見直す
char8
コンポーネントテンプレート
ng-src ディレクティブを使用すると無効な場所にHTTPリクエストを送信することを防ぐことができる。
char9
ng-route ディレクティブ
そもそも「ルーティング」とは、リクエストされたURLに応じて、処理の受け渡し先（コントローラー／テンプレート）を決定すること、または、その仕組みのことを言う。
char10
char11
char12
char13
char14
感想
- TemplateとModelとViewの関係を理解することが重要そうと感じた。（当たり前だけど）
- 後半は疲れてしまったのでもう少し内容を見直したい
