AngularJSコトハジメ
どうもお久しぶりです。
tomigunguです。
本日はAngularJSコトハジメ、ということでAngularをさわる前に知っておくべきことを書いていこうと思います。
AngularJSとは？
MVWフレームワークである
WはWhateverの略です。まあ、ModelとViewが重要なのでその他って感じですかね笑
重要なこのMVWフレームワークですが、重要なポイントが3点あります。
ModelとViewの分離
これはjQueryを触っている方ならわかると思います。jQueryを使うとUIのコンポーネントを簡単に配置、構築することができる反面、ModelがViewの役割を担いすぎてしまうので、ModelとViewがほぼ一緒になってしまいます。これはメンテナンス性や再利用性を低下させる原因となります。
そこでAngularのようなMVWフレームワークを使うことで、完全にModelとViewを分離させることができます。内部的にはHTMLとJSの値のやりとりは全てAngularが吸収し、Modelに格納することで双方向にデータのやりとりが可能になります。
Data Binding
UIとModelの双方向のデータのやりとりを可能にします。例をあげると、inputタグに書かれた文字列が即時別のDOMに反映されて表示されます。これはAngularがModelで吸収し、EL式のような{{str}}で囲まれた要素と結びつけるからです。
DI
- コントローラーの関数置き換えができる
- モック用のコンポーネントが使える
- UIだけ最初に作りこむことができる（テストデータなどを用いて）
- 環境構築の手間が省ける
- テストデータも埋め込んだ形でデバッグができるから
本当はもっと奥が深いのですが、僕の知識ではここまで。。。
以上3点の重要なポイントを抑えた上で、まずはmoduleについての説明です。
module
- バケツのようなもの
- アプリケーション立ち上げの際に最初に定義する
定義は以下のように行います。
var myApp = angular.module("MyApp", []);
第2引数には依存するモジュールを配列で指定することができます。
この「myApp」という変数にcontroller、filter、directiveなどのコンポーネントを追加していきます。
myApp.controller("MyController", function() {...});
さて、ここからはmoduleに追加できるコンポーネントの説明をしていきます。
template
主にviewの要素を定義する。HTMLで特定の部品を書いておける。
directive
自分でHTMLのタグもしくは属性を作成できる。
これら2つのコンポーネントはViewの役割を担います。
controller
- ロジックの集合体
- この中でViewを操作しない
- 変更したデータをバインドする（$scopeを使う）
scopeについて
scopeには親子関係があります。
- その実体はオブジェクト
- この変更は親に反映されない
- オブジェクトを作成することで、参照できる
- 子のscopeで見つからなかったら、親のscopeを辿っていく
Controllerの使い方
- directiveの初期化の際に渡す
- 外部からscopeを渡す
- テストがしやすくなる
- スコープが変わっているかを確認することでテストが成功したかどうかがわかる
service
- scopeに紐付かないロジックの集合
- 画面とは関係ない処理を定義する際に利用
- 例えば単純な計算など
filter
- UIで表示する式の値をフィルタリングする
- 標準で提供されているが、カスタムで作成することもできる
constant
- 初期化が1度のみできる定数を定義（製品名、会社名など？）
value
- 何でも入れられる変数を定義
factory
- サービスを登録する際に使用
- 作るサービスを変更しなければいけない場合
- 例えば、処理を加える、DIを変える...etc
provider
- factoryを作る担当
- UIのコンポーネントを使う、デフォルト値を上書きする際に使用
以上でコンポーネントの説明は終わりです。
今回勉強してみて、AngularJSは学習コスト高いし覚えること多いなぁ・・と感じました。
ただこれを使いこなすことができれば、メンテナンス性が高く、テストのしやすいコードを書くことができると確信しました！
それでは(^^)
