この記事は「AngularJS - 初心者からエキスパートまで7つのステップ」の第3回目です。
記事では、AngularaJSアプリケーションを作り始める方法を説明します。2番目の記事では、スコープと$scopeの機能について説明します。
この一連のチュートリアルは、Morning Editionの番組で現在放送中の****ストーリーを表示し、ブラウザで再生するNPR放送用のオーディオプレーヤーの開発につながります。完成版のデモはこちらでご覧いただけます。
第III部 データ・バインディング
テキスト入力ボックスをperson.nameプロパティにバインドすることで、アプリケーションをもう少し面白くすることができます。このステップでは、テキスト入力ボックスとページの双方向バインディングを確立します。
この文脈での "双方向 "とは、ビューがプロパティ値を変更した場合、モデルはその変更を "見る "ことを意味し、モデルがプロパティ値を変更した場合、ビューはその変更を "見る "ことを意味します。「Angular.jsはこの仕組みを自動的に構築します。この仕組みに興味がある方は、digest_loopについて詳しく説明した後の記事をご覧ください。
このバインディングを作成するには、テキスト入力ボックスでng-modelディレクティブ属性を次のように使用します：
<div ng-controller="MyController">
<input type="text" ng-model="person.name" placeholder="Enter your name" />
<h5>Hello {{ person.name }}</h5>
</div>
データバインディングが確立されたので、VIEWがどのようにMODELを変更するかを見てみましょう：
お試しください：
テキストボックスに入力すると、その下の名前が自動的に変更されます。これは、データバインディングのひとつの方向 (ビューからモデルへ) を示しています。この処理を示すために、MyController のモデルで $scope のデータを更新するタイマー関数を書いてみましょう。次のコードはこのタイマー関数を作成し、 秒ごとにカウントダウンして $scope のclock変数を更新します：
app.controller('MyController', function($scope) { $scope.person = { name: "Ari Lerner" }; var updateClock = function() { $scope.clock = new Date(); }; var timer = setInterval(function() { $scope.$apply(updateClock); }, 1000); updateClock();});
ご覧のように、modelclock変数のデータが変更されると、ビューは自動的にその変更を反映して更新されます。中括弧を使用することで、時計変数の値をビューに表示させるのが非常に簡単になります：
<div ng-controller="MyController">
<h5>{{ clock }}</h5>
</div>
ご覧ください。
{時計 }}
双方向性
前節では、テキスト入力ボックスにデータをバインドしました。データバインディングはデータに限らず、 $scope 内の関数をコールするためにも使用できることに注意しましょう。
ボタンやリンク、その他のDOM要素では、ng-click という別のディレクティブ属性を使ってバインディングを実装することができます。この ng-click ディレクティブは、DOM要素のマウスのクリックイベントを、ブラウザが DOM要素のクリックイベントをトリガーしたときに呼び出されるメソッドにバインドします。前の例と同様に、このバインディングのコードは次のようになります：
<div ng-controller="DemoController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<button ng-click="subtract(1)" class="button">Subtract</button>
<h4>Current count: {{ counter }}</h4>
</div>
ボタンもリンクも、その DOM要素を含むコントローラのすべての$scope オブジェクトにバインドされ、マウスでクリックされると、Angular は適切なメソッドを呼び出します。Angular に呼び出すメソッドを指定するときは、メソッド名を引用符で囲んだ文字列で書くことに注意しましょう。
app.controller('DemoController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});
ご覧ください：
myAppのデータバインディングとAJAX
インタラクティビティー
前の例では、学んだデータバインディングをビューのボタンに適用し、再生ボタンをPlayerControllerのplayメソッドにバインドしました（同様に、停止ボタンをstopメソッドにバインドしました）。
AJAX
前のチュートリアルでは、ローカルに保存されたオーディオファイルを参照していましたが、これは動的なNPRフィードではなく静的なNPRファイルです。NPRアプリケーションでは、$httpを使用して再生可能なニュースファイルのリストを入力します。Angular.jsはネイティブでAJAXをサポートしています。Angular.jsは$httpサービスと呼ばれるサービス（後のセクションで説明）を通してAJAXをサポートします。Angular.jsのコアサービスは$scopeサービスに見られるように、すべて接頭辞が$です。httpサービスは非常に柔軟で、AJAXサービスを呼び出す多くの方法があります。このチュートリアルをシンプルに保つために、最もシンプルな方法に焦点を当てます。http サービスについては、後のより高度な章で詳しく説明します。詳しく説明する前に、まず $http サービスを使用してリクエストを作成しましょう：
$http({ method: 'JSONP', url: 'http://..com/v1/.json?callback=JSON_CALLBACK'}).success(function(data, status, headers, config) { // data contains the response // status is the HTTP status // headers is the header getter function // config is the object that was used to create the HTTP request}).error(function(data, status, headers, config) {});
#p#
やってみてください。
http&sp;サービスは、.st オブジェクトやリモート
上の例のように、callback=JSON_CALLBACKという文字列をそのままにしておくと、Angular.jsがJSONPリクエストの処理を代行して、JSON_CALLBACKを適切なコールバック関数に置き換えてくれることに注意してください。
http&sp;サービスはそのような関数です: TPリクエストを作成する方法を指定するsetupオブジェクトを受け取ります; プロミス
API キーはメモしておきましょう。さて、いよいよ PlayController をセットアップして 、オーディオファイルを取得するために $http サービスをコールします。
先ほどと同じように、$httpサービスを呼び出してリクエストを作成します。このサービスはコントローラがインスタンス化されたときに開始するようにしたいので、このメソッドをコントローラ関数（コントローラが作成されたときに呼び出される）に直接記述します：
var apiKey = 'YOUR_KEY',
nprUrl = 'http://..org/query?id=61&fields=relatedLink,title,byline,text,audio,image,pullQuote,all&output=JSON';
app.controller('PlayerController', function($scope, $http) {
// Hidden our previous section's content
// construct our http request
$http({
method: 'JSONP',
url: nprUrl + '&apiKey=' + apiKey + '&callback=JSON_CALLBACK'
}).success(function(data, status) {
// Now we have a list of the stories (data.list.story)
// in the data object that the NPR API
// returns in JSON that looks like:
// data: { "list": {
// "title": ...
// "story": [
// { "id": ...
// "title": ...
}).error(function(data, status) {
// Some error occurred
});
});
これで、success関数のデータの中にオーディオファイルのリストができました。成功コールバック関数では、このリストを $scope オブジェクトにバインドします：
// from above
}).success(function(data, status) {
// Store the list of stories on the scope
// from the NPR API response object (described above)
$scope.programs = data.list.story;
}).error(function(data, status) {
// Some error occurred
先ほどと同じように、ビュー内のプログラムにアクセスすることで、ビュー内のこのデータにアクセスすることができます。Angular.jsを使用する良い点の1つは、プロミスパターンが成功した結果を返すと、Angular.jsが自動的にその結果でビューを埋めることです。
<div ng-controller="PlayerController">
{{ programs }}
</div>
やってみてください。
次の章では、Angular.jsに付属するディレクティブを使用して、このデータオブジェクトをビューに有意義に表示する方法について説明します。
このシリーズの公式コードベースはgithubからダウンロードできます：
/---はい
このリポジトリをローカルに保存するには、git がインストールされていることを確認し、リポジトリをクローンしてpart3ブランチをチェックアウトします：
git clone https://.com/auser/ng-newsletter-beginner-.git
git checkout -b part3
