先週の土曜日、ランサーズさんで行われた 第3弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。
sasata299xlancers
AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態(要素の追加・削除や、状態のon/off など)を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。

ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが(これは directive と呼ばれます)、この ng というのは AngularJS の2文字目と3文字目を表しています。また、この名前の付け方は結構自由で、先頭に x- や data- を付けても良いし、区切り文字も : とか _ でも問題無いですー(以下のように処理されるため)。

http://docs.angularjs.org/guide/directive
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.



AngularJS を Rails 等とがっつり組み合わせて使うときには、Rails は JSON を返すだけにして DOM の構築なんかはすべて AngularJS でやるというのが良いのかもしれません(データを Rails と AngularJS の両方で扱うことになってしまうので)。が、僕の場合には途中から導入したというのもあって、そこまで AngularJS を全力で使うという感じではなく、選択肢の追加・削除や、要素の出し分けのような jQuery でやるとめんどくさいし後々バグリそうだなーというところにちょこちょこと使うという方針でやってます。

しばらく使ってみた感想としては、一度作るだけなら jQuery でも AngularJS でもあまり変わらない(というか jQuery の方が慣れてるし簡単かな。AngularJS は学習コスト掛かるし)ですが、後々の運用を考えるとバグが出にくそうな AngularJS が良いかな〜という感じです :)

その他の Tips としては、jQuery 側から AngularJS を呼びたいときには $apply を使うとかですね。AngularJS でうまくイベントが bind 出来ないとか、jQuery plugin の関数を呼びたいみたいなときには便利です。

# .upload が何か変化したら nowLoading を true にする
$(document).on 'change', '.upload', ->
  $scope.$apply ->
    $scope.nowLoading = true
  $(@).upload url, { token: token }, callback, 'json'

AngularJS に興味を持った方は以下のサイトを見てみると理解が早いかもしれません。動画で見れると理解も早いしとても良い時代ですね><

AngularJS入門 (全12回) - プログラミングならドットインストール
AngularJS Video Tutorials, Workshops, and Training @eggheadio
このエントリーをはてなブックマークに追加