AngularJSアプリケーション開発ガイド 第2章 AngularJSアプリケーションの構造 その4

フィルタを使ったデータ形式の指定

フィルタを使うと、テンプレートの中で表示されるデータの表示形式を指定できる。フィルタの構文は次のとおり。

{{ expression | filterName.parameter1:...parameterN }}

ここでexpressionはAngular式を表し、filterNameは適用したいフィルタの名前を表す。フィルタに与えるパラメータはコロンで区切って指定する。パラメータにもAngular式を指定できる。

組み込みのフィルタの1つ、currencyフィルタは次のように利用する。

{{12.9 | currency}} // "$12.90"と表示される

フィルタの指定はコントローラやモデルではなくビューの中で行う。数値の前のドル記号は人間のユーザーにだけ意味があり、数値を処理するロジックにとっては重要ではない。

AngularJSには日付や数値あるいは大文字への変換といったフィルタも用意されている。

データバインディングの中でパイプ記号（|）を指定すると、複数のフィルタを連鎖させることができる。

{{12.9 | number:0 | currency}} // "$13.00"と表示

上の例では、numberフィルタに四捨五入する桁数を指定し、12.9を13に変換している。

組み込みのフィルタだけでなく、自分で作成したフィルタを適用することもできる。フィルタの実装例は以下。

var homeModule = angular.module("HomeModule", []);
homeModule.filter("titleCase", function () {
    return function (input) {
        var words = input.split(" ");
        var titleCasedWords = words.map(function (word) {
            return word.charAt(0).toUpperCase() + word.slice(1);
        });

        return titleCasedWords.join(" ");
    };
});

このフィルタは、以下のようにして呼び出せる。

{{"hello world" | titleCase}} // "Hello World"

サーバとの通信

サーバとの通信のため、$httpサービスが用意されている。単純なHTTPの他、JSONPとCORSにも対応し、JSONの脆弱性やXSRFに対する防御の機能も含まれている。リクエストやレスポンスのデータへの変換や、シンプルなキャッシュも可能。

サーバに問い合わせを行うコードの例は以下。

function ShoppingController($scope, $http) {
    $http.get("/products").success(function(data, status, headers, config) {
        $scope.items = data;
    };
}

ディレクティブを使ったDOMの更新

ディレクティブは、HTMLの構文に対する拡張。独自の要素や属性を通じて、ふるまいやDOMへの変換を指定できる。再利用可能なUIコンポーネントを定義したりアプリケーションの設定を行ったりするほか、UIのテンプレートの中ではほぼどんな処理でも可能。AngularJSに組み込みで用意されているディレクティブだけでなく、自分でディレクティブを定義することもできる。

サービスと同様、ディレクティブもモジュールのAPIを通じて定義する。

var appMoudule = angular.module("appModule", []);
appModule.directive("ngbkFocus", function() {
    return {
        link: function(scope, element, attrs, controller) {
            element[0].focus();
        }
    };
});

入力データの検証

AngularJSアプリケーションでの<form>要素は自動的に機能拡張され、SPA(Single Page Application)に適した機能が追加される。

HTML5のrequired属性やtype=”email”、type=”number”などを使用すると、対応ブラウザではブラウザのネイティブ機能が呼び出され、非対応ブラウザでも同じ処理を行うディレクティブが自動的に追加される。
（このように、非対応のブラウザにも同等の機能を追加することをpolyfillと呼ぶ）

フォームのデータの正当性は、$validプロパティで確認できる。フォーム内のすべてのフィールドの値が正当な場合に、$validにtrueがセットされる。