AngularJS 基礎最速マスター

AngularJS javascript

AngularJSとは、Googleのエンジニアが中心となって開発されている Webアプリケーションフレームワークです。
百式田口さんのドットインストール12+4+4連投で盛り上がっているので、大好きな 最速マスターシリーズっぽくまとめてみた。

特徴

詳しくは公式サイトや Google Developers Blog の翻訳記事をどうぞ。

通常の WebAppの場合、View(HTML)とModel(データ)の紐付けの指定がめんどいのですが、AngularJSの場合、HTMLのタグを拡張することで、Controller側の指定やイベントをシンプルにバインドしてくれます。

AngularJSの読み込み

公式のサンプルコードを参考に

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

他のフレームワークと併用

AngularJSは、HTMLをテンプレート的に扱うので、HTML要素の変更を他のフレームワークが行う場合に問題が発生します。単純にjQueryからHTMLを追加する場合は、HTML要素を $Compileメソッドの引数で与える*1など。
イベントのhookについても仕込みが必要なようです。*2

AngularUI for AngularJS を見ると、jQuery Pluginの利用機能を持っているようです。

基本

公式のサンプルコード。タグの中に見慣れない属性が…

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourname" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourname}}!</h1>
    </div>
  </body>
</html>
ng-app

AngularJSのWebAppである宣言として、HTML要素に「ng-app」属性を指定します。AngularJSで用いられる「ng-」は、AngularJS から来たらしいです。

ng-model

AngularJSが扱うためのモデル(データ)の指定です。今回は input要素なので、て入力した文字列になります。

{{}}(バインディング)

モデルをViewに展開するためのバインディングは、二重中括弧です。この{{}}の中は、Javascriptのeval()を拡張したものとして展開されます。

上のHTMLソースをコピペしてブラウザで開くとテキストボックスに入力した内容がリアルタイムに表示されるのが判るとおもいます。

少し拡張

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  </head>
  <body>
    <h2>my smartphones.</h2>
    <div ng-controller="DroidListCtrl|reverse">
    <ul>
      <li ng-repeat="droid in droids">
        {{droid.brand}}
        <p>{{droid.name}}</p>
      </li>
    </ul>
    </div>
    <script>
    function DroidListCtrl($scope){
      $scope.droids = [
      	{"brand": "SHARP", "name": "IS01", "version": "1.6" },
      	{"brand": "SHARP", "name": "IS05", "version": "2.3.4" },
      	{"brand": "Samsung", "name": "GalaxyS SC-01B", "version": "2.3.6" },
      	{"brand": "HTC", "name": "EVO 3D ISW12HT", "version": "2.3.4" }
      ];
    }
    </script>
  </body>
</html>
ng-controller

コントローラの指定を行います。値はコントローラとして利用するオブジェクトのfunction名です。

ng-repeat

テンプレート機能の「繰り返し」。値に指定した「"droid in droids"」は、モデル「droids」をイテレートして droidに代入しているイメージです。コントローラの function DroidListCtrl()で定義した droids がデータになるわけです。

なお AngularJSにはFilterという機能がありイテレータに対するフィルタリングやソートなどが可能です。

    Search: <input ng-model="searchText">
    <ul>
      <li ng-repeat="droid in droids|filter:searchText">

な感じに書き換えると、入力した文字列を含んだモデルのみを抽出します。
Filterには他に、currency,json,limitTo,lowercase,number,orderBy,uppercaseがあり、独自のfunctionを書くことで実装可能です。

その他の機能

AngularJSのディレクティブ

上では、<html ng-app とか書いたけど、classの属性として指定することも可能。

<span my-dir="exp"></span>
<span class="my-dir: exp;"></span>
<my-dir></my-dir>
<!-- directive: my-dir exp -->
フォーム部品の初期値やバリデート

required で必須。後 ng-minlength,ng-maxlength とか。
urlやemailなどは、まんま任せられる。

Value1: <input type="checkbox" ng-model="value1"> <br/>
Value2: <input type="checkbox" ng-model="value2"
             ng-true-value="YES" ng-false-value="NO"> <br/>

checkboxとかで便利。値取るときに ifとか書かなくて済む。
そうそう、form要素に novalidate を書かないと HTML5とバッティングするので注意とドットインストールの #10で注意されてた。

他の便利なディレクティブ

ng-src は、hrefなどの src属性の指定に使える。clickイベントについても

<button ng-click="count = count + 1" ng-init="count=0">
  Increment
</button>
count: {{count}}

で簡単に扱える。

JSON/JSONP/RESTも扱える

hoge.json にJSON形式でデータを置いて読み込むには、$http.get。JSONPの場合は、
$http.jsonp。渡すuriの最後にcallbackを忘れないこと。
RESTを扱うには、angular-resource.js を読み込む必要がある。(ここ試してないっす)

Deep Linking

WebAppは動的にViewを作るので uriは変更されない。AngularJSはuriを保持させるので
bookmarkも有効に機能する。

Testable

コントローラにロジックは分離・独立しているし、組み込みのMockがあるためテストしやすいらしい。
(ここも試してないっす)。公式にはテストコードも載っているものが多い。

最後に

MVCだけあって、HTMLの見通しがすっきりして、ロジックがキレイに書けるのはいいね。簡単なWebAppを作るには短いコードで書けて生産性高いと思う。
複雑なことをする時の問題点とかは、書いてみないと何とも言えないかな。
公式はサンプルコードも多いので、眺めるだけでも勉強になる。
興味のある方には、ぜひドットインストールのAngularJS特集をご覧あれ。

*1:AngularJS + JQuery : How to get dynamic content working in angularjs - Stack Overflow

*2:How to call jQuery properly from an AngularJS controller - Stack Overflow