これらのWebページに動的な機能を与える時が来ました - Angularjsを使用してください！後でコントローラーを追加するテストを追加しました。
アプリケーションには多くの種類のコードアーキテクチャがあります。 AngularJSアプリケーションの場合、コードを分離して懸念を個別に分離するために、Model-View-Controller（MVC）モードを使用することをお勧めします。これを念頭に置いて、AngularJSを使用して、アプリケーションにモデル、ビュー、コントローラーを追加します。
作業ディレクトリをリセットしてください：
コードコピーは次のとおりです。
gitチェックアウト-fステップ2
私たちのアプリには現在、3つの電話のリストがあります。
ステップ1とステップ2の最も重要な違いを以下に示します。 GitHubにアクセスして完全な違いを確認できます。
ビューとテンプレート
AngularJSでは、モデルがHTML **テンプレートを介してレンダリングされた後のマッピングです。これは、モデルがいつ変更されても、AngularJSがジャンクションポイントをリアルタイムで更新し、ビューを更新することを意味します。
たとえば、ビューコンポーネントは、次のテンプレートを使用してAngularJSによって構築されます。
コードコピーは次のとおりです。
<html ng-app>
<head>
...
<スクリプトsrc = "lib/angular/angular.js"> </script>
<スクリプトsrc = "js/controllers.js"> </script>
</head>
<body ng-controller = "phonelistctrl">
<ul>
<li ng-repeat = "電話の電話">
{{phone.name}}
<p> {{phone.snippet}} </p>
</li>
</ul>
</body>
</html>
ngrepeatディレクティブと巻き毛の装具に包まれた2つのangularjs式を使用して同じ効果を達成できるため、静的にエンコードされた携帯電話リストを置き換えました。
1。Ng-repeat = "電話の電話" <li>タグのステートメントは、Angularjs Iteratorです。このイテレーターは、AngularJSに、最初の<li>タグをテンプレートとして使用して、リスト内の各電話の<li>要素を作成するように指示します。
2。ステップ0で学んだように、curlyブレースは電話に巻き付けられています。nameとphone.snippetデータバインディングを識別します。一定の計算とは異なり、ここでの式は実際に適用したデータモデルの参照であり、PhoneListCtrlコントローラーにこれらを設定しました。
モデルとコントローラー
データモデルはPhoneListctrlコントローラーで初期化されます（ここでは、配列を含む関数であり、配列に保存されているオブジェクトはモバイルデータリストです）：
app/js/controller.js：
コードコピーは次のとおりです。
function phoneListctrl（$ scope）{
$ scope.phones = [
{"name"： "nexus s"、
「スニペット」：「Nexus Sで速く速くなった」}、
{"name"： "Motorola xoom™with wi-fi"、
「スニペット」：「次の世代のタブレット」}、
{"name"： "Motorola xoom™"、
「スニペット」：「次の世代のタブレット」}
];
}
コントローラーは非常に重要な役割を果たしていないようですが、ここでは重要な役割を果たしています。データモデルのコンテキストを考えると、コントローラーにより、モデルとビューの間でデータバインディングを確立できます。これは、プレゼンテーションレイヤー、データ、ロジックコンポーネントをリンクする方法です。
1。PhoneListctrl-コントローラーメソッドの名前（JSファイルControllers.js）は、<body>タグのngControllerディレクティブの値と一致します。
2。携帯電話のデータは、コントローラー機能に注入されたスコープ（$スコープ）に関連付けられています。アプリケーションが開始されると、ルートスコープが作成され、コントローラースコープはルートスコープの典型的な後継者です。このコントローラーの範囲は、すべての<body ng-controller = "phonelistctrl">タグ内のデータバインディングに有効です。
Angularjsの範囲理論は非常に重要です。スコープは、テンプレート、モデル、コントローラーが協力するためのボンダーと見なすことができます。 AngularJSは、テンプレートの情報、データモデル、コントローラーだけでなく、スコープを使用します。これらはモデルとビューを分離するのに役立ちますが、実際に同期されています！モデルの変更はすぐにビューに反映されます。ビューの変更は、すぐにモデルに反映されます。
AngularJSスコープをより詳細に理解するには、AngularJSスコープドキュメントを参照してください。
テスト
「AngularJSメソッド」により、開発中にコードをテストするのは非常に簡単です。コントローラー用に新しく追加された次の単体テストを見てみましょう。
test/unit/controllersspec.js：
コードコピーは次のとおりです。
説明（ 'Phonecat Controllers'、function（）{
説明（ 'phoneListctrl'、function（）{
それ（ '3つの電話で「電話」モデルを作成する必要があります'、function（）{
var scope = {}、
ctrl = new PhoneListctrl（scope）;
想像（scope.phones.length）.tobe（3）;
}）;
}）;
}）;
このテストは、携帯電話アレイに3つのレコードがあることを確認します（当面の間、このテストスクリプトを理解する必要はありません）。この例は、AngularJSコードの単体テストを作成することがどれほど簡単かを示しています。テストはソフトウェア開発の重要な部分であるため、AngularJSでテストを簡単に作成して、開発者がそれらをより多く書くことを奨励します。
テストを書くとき、AngularJS開発者は、ジャスミンの行動駆動型開発（BBD）フレームワークで構文を使用する傾向があります。 Angularjsではジャスミンの使用を強制しませんが、チュートリアルにあるすべてのテストはジャスミンで書かれています。ジャスミンの公式ホームページまたはジャスミンウィキに関する関連知識を得ることができます。
AngularJSベースのプロジェクトは、JStestDriverを使用してユニットテストを実行するために事前に構成されています。
このようなテストを実行できます：
1.別の端末で、Angular-Phonecatディレクトリを入力して実行してください。/scripts/test-server.shを実行してテストを開始します（Windowsコマンドラインに./scripts/test-server.batを入力してスクリプトを実行し、スクリプトコマンドを次の方法で実行してください）。
2.新しいブラウザウィンドウを開き、http：// localhost：9876にアクセスしてください。
3.「このブラウザを厳密なモードでキャプチャする」を選択します。
この時点で、窓を放っておいて忘れることができます。 JStestDriverはテストを完了し、結果を端末に出力します。
4。TESTに./Scripts/test.shを実行します。
次の結果と同様の結果が表示されます。
コードコピーは次のとおりです。
クロム：ランナーリセット。
。
合計1テスト（合格：1;失敗：0;エラー：0）（2.00 ms）
Chrome 19.0.1084.36 Mac OS：1つのテストを実行（合格：1;失敗：0;エラー0）（2.00 ms）
うん！テストが合格しました！またはいいえ...注：テストを実行した後にエラーが発生した場合、ブラウザを閉じて端子に戻ってスクリプトを閉じてから、上記の手順を繰り返します。
練習する
index.htmlに別のデータバインディングを追加します。例えば：
コードコピーは次のとおりです。
<p>電話の総数：{{phones.length}} </p>
新しいデータモデルプロパティを作成し、テンプレートにバインドします。例えば：
コードコピーは次のとおりです。
$ scope.hello = "こんにちは、世界！"
ブラウザを更新し、「こんにちは、世界！」を確認してください表示されます
イテレーターでシンプルなテーブルを作成します：
コードコピーは次のとおりです。
<表>
<tr> <th>行番号</th> </tr>
<tr ng-repeat = "i in [0、1、2、3、4、5、6、7]"> <td> {{i}} </td> </tr>
</table>
次に、データモデル式のiが1増加します。
コードコピーは次のとおりです。
<表>
<tr> <th>行番号</th> </tr>
<tr ng-repeat = "i in [0、1、2、3、4、5、6、7]"> <td> {{i+1}} </td> </tr>
</table>
tobe（3）にtobe（4）に変更してから、./scripts/test.shスクリプトを再度実行してください
要約します
これで、モデル、ビュー、コントローラー分離の動的アプリケーションがあり、常にテストしています。これで、ステップ3にアクセスして、アプリケーションにフルテキスト検索機能を追加できます。