AngularJSアプリケーション開発ガイド

54

2

章 

AngularJS

アプリケーションの構造

$scope.clickFocused = function() {

$scope.message.text = "

フォーカスありのボタンがクリックされました

";

};

}

var appModule = angular.module("app", []);

このページが読み込まれると、「フォーカスあり

!

」のボタンにフォーカスが置かれた状態になっ

ています。このまま

Space

か

Enter

のキーを押すとクリックのイベントが発生し、

ng-click

で指

定されたイベントハンドラが呼び出されます。そして「フォーカスありのボタンがクリックされま

した」というメッセージが表示されます。実際の画面は図 2-16 のようになります。

図2-16　フォーカスのディレクティブ

2.9

 入力データの検証

AngularJS

アプリケーションでの

<form>

要素は自動的に機能拡張され、

SPA

（単一ページのア

プリケーション）に適した機能が追加されます。例えばフィールドの正当な値を定義し、すべての

フィールドに正当な値が入力されていた場合にだけ送信を行えるようにできます。

名前とメールアドレスの入力が必須で、年齢は省略可能なフォームを作成してみましょう。サー

バにデータを送信する前に、フィールドに入力された値を検証することにします。表示は図 2-17

のようになります。

2.9

 入力データの検証

55

図2-17　入力データの検証

ここで検証するのは、名前のフィールドに何らかの文字列が入力されていることと、 ...