AngularJSが便利と聞いて

こんばんは、south37です。

前回までbackbone.jsについて勉強していた訳ですが、最近のトレンドは圧倒的にAngular.jsらしいですね。

って事で、今回はAngular.jsについて学んでいこうと思います。

Angular.jsって何?

そもそもAngular.jsって何やねんって話ですが、Backbone.js、Knockout.jsと並ぶJavascriptの3大MVC フレームワークの一つで、UIバインディング等の便利な機能を備えています。少ないコード量で高度な機能を実現出来るため、生産性の大幅な向上が見込めるのが特徴的ですね。

とりあえずコードを見てみましょう。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
  </head>
  <body>
    <div ng-init="qty=1;cost=2">
      <b>Invoice:</b>
      <div>
      Quantity: <input type="number" ng-model="qty" required >
      </div>
      <div>
      Costs: <input type="number" ng-model="cost" required >
    </div>
    <div>
      <b>Total:</b> {{qty * cost | currency}}
    </div>
  </div>
</body>
</html>

jsじゃなくてhtmlじゃん、と思うかもしれません。が、実はこれだけでフォームに入力した値を用いて計算した金額を表示する、という機能が実現出来ます。

画面イメージはこんな感じです。
f:id:south37:20140122230834p:plain

ポイントは、「ng-何とか」の形の属性です。angularJSでは、この属性を使う事でDOM要素とモデルやコントローラーを関係付ける事が出来ます*1
しょっぱなのng-appは、AngularJSの適用範囲を示す為に用います。htmlタグの中で記載されている場合は、ページ全体に適用される事になります。ng-initでは、渡した文字列がjavascriptコードとして実行されます。上記の例ではqtyやcostの初期化が行われています。ng-modelは、inputタグやtextboxタグの属性として使用され、入力された文字列を変数にバインドする役割を果たします。requiredは、入力のvalidationを行う為のもので、入力が空であれば入力ボックスの枠を赤くします。
二重カッコで囲まれた部分は、「式」を書く事が出来ます。その際、unixのパイプの様な形式でfilterをかける事が出来ます。上記の例では、qty * costで算出した値にcurrency filterを適用する事で、$2.00というお金の単位での表示を行っています。

こんな感じで、angularJSの表現力のおかげでほとんどコードを書かなくてもなかなかの高機能を実現する事が出来ます。便利ですね!!ぜひ、手元のブラウザで上記のhtmlを表示してみて、便利さを実感して欲しいです。

*1:正確には、directiveと呼ばれるものがDOMとロジックの関連づけを行います。directiveはタグや属性等の様々な形で定義する事が出来ます。ここでの例は属性として定義されたng-initやng-modelといった標準directiveを用いています。