AngularJS

最近流行りらしいクライアントサイドMVCフレームワーク。 公式サイトは http://angularjs.org/

チュートリアル をひと通り実施した。 テスト(testacular)がうまく動かなかった(ちゃんと動く環境を作れなかった)ので、テストはすべてスキップ。

チュートリアルのコードは github で公開されており、タグを切り替えることでステップごとのコードに切り替わる。

参考資料

チュートリアル メモ

  • アプリケーションのルート要素に ng-app と書く(例:<html ng-app>)
    • HTML5互換にするには data-ng-app とする
  • {{ と }} で囲まれた部分に式(expression)が書ける
    • JavaScript ではなく、AngularJS 独自の形式(Angular expression)
  • コントローラーとスコープ
    • ng-controller属性でコントローラーを指定する
    • コントローラーごとにスコープ($scope)を持てる
    • モデルや操作(関数)をここに設定する
  • 双方向バインディング
    • ビューからモデルを参照・変更することもできるし、コントローラーからも参照・変更することができる
    • モデルを変更するとビューが更新される
  • パイプ(正式な名前がわからない)
    • Angular expression 内で、関数の入力と出力を | でつなげて処理できる
    • $filter AngularJS関数
      • 文字列の場合は部分一致で比較する
      • オブジェクトの場合は存在するプロパティが一致するかで比較
      • 関数を指定することも可能
  • JSONデータを直接 $scope のプロパティに設定可能
    • observable(...) とか必要ない
    • どうやって実現しているんだろう...
  • DI(Dependency Injection)
    • 接頭子 $ のついた識別子
    • 名前が重要なので Minification に注意
  • img/ng-src
    • img 要素の src 属性に Angular expression を書かないこと(Angularが評価する前にHTTPリクエストが発行されてしまう)
    • 他の要素もそうかも(iframe、script、style...)
  • URLのフラグメント部分を見てビューの切り替え(ルーティング)が可能
    • ng-view のついている要素を置き換える
  • クリックイベントハンドラは ng-click を使う(onclickではない)
  • $http$resource
    • $http でAJAXが可能
    • RESTful APIを簡単にラップできる $resource がある