AngularJS 入門チュートリアル (2): AngularJS Template_AngularJS

これらの Web ページに動的な機能を追加するときが来ました - AngularJS を使用してください!ここでは、後で追加するコントローラーのテストを追加しました。

アプリケーションにはさまざまなタイプのコード構造があります。 AngularJS アプリケーションの場合は、Model-View-Controller (MVC) パターンを使用してコードを分離し、懸念事項を分離することをお勧めします。これを念頭に置いて、AngularJS を使用していくつかのモデル、ビュー、コントローラーをアプリケーションに追加します。

作業ディレクトリをリセットしてください:

コードをコピーします コードは次のとおりです:

git checkout -f ステップ-2

私たちのアプリには 3 台の電話のリストが含まれています。

ステップ 1 とステップ 2 の最も重要な違いを以下に示します。 GitHub にアクセスすると、完全な違いを確認できます。

ビューとテンプレート

AngularJS では、ビューは HTML テンプレートを通じてレンダリングされたモデルのマッピングです。これは、モデルが変更されるたびに、AngularJS がリアルタイムで結合ポイントを更新し、それに応じてビューを更新することを意味します。

たとえば、ビュー コンポーネントは、次のテンプレートを使用して AngularJS によって構築されます:

コードをコピー コードは次のとおりです:

<頭>
...
<スクリプト src="lib/angular/angular.js">

• 
  {{phone.name}}
  

  {{phone.snippet}}

  
  

静的にエンコードされた電話リストを置き換えただけです。ここでは ngRepeat ディレクティブと、中かっこで囲まれた 2 つの AngularJS 式 ({{phone.name}} と {{phone.snippet}}) を使用しているため、同じ効果を達成できます。 。

1.

タグ内の ng-repeat="phone inphone" ステートメントは AngularJS イテレータです。このイテレータは、最初の

タグをテンプレートとして使用して、リスト内の電話番号ごとに

要素を作成するように AngularJS に指示します。

2. ステップ 0 で学習したように、phone.name とphone.snippet を囲む中括弧はデータ バインディングを識別します。定数の計算とは異なり、ここでの式は実際にはアプリケーションのデータ モデル参照であり、PhoneListCtrl コントローラーに設定しています。

モデルとコントローラー

データ モデルは PhoneListCtrl コントローラーで初期化されます (これは配列を含む単なる関数であり、配列に格納されるオブジェクトは携帯電話データ リストです)。

app/js/controller.js:

コードをコピーします コードは次のとおりです:

function PhoneListCtrl($scope) {
$scope.phones = [
{"名前": "Nexus S",
"snippet": "Nexus S でさらに速くなりました。"},
{"name": "Wi-Fi 搭載 Motorola XOOM™",
"snippet": "次世代のタブレット。"},
{"名前": "MOTOROLA XOOM™",
"snippet": "次世代のタブレット。"}
];
}

コントローラーは制御の役割を果たしていないように見えますが、ここでは重要な役割を果たします。コントローラーを使用すると、データ モデルのコンテキストをモデルとビューに与えることで、モデルとビューの間のデータ バインディングを確立できます。これは、プレゼンテーション層、データ、論理コンポーネントを接続する方法です:

1.PhoneListCtrl - コントローラー メソッドの名前 (JS ファイルcontrollers.js 内) は、 タグの ngController ディレクティブの値と一致します。

2. 携帯電話のデータは、コントローラー関数に挿入されたスコープ ($scope) に関連付けられています。アプリケーションが起動すると、ルート スコープが作成され、コントローラー スコープはルート スコープの通常の後継になります。このコントローラのスコープは、 タグ内のすべてのデータ バインディングに対して有効です。

AngularJS のスコープ理論は非常に重要です。スコープは、テンプレート、モデル、コントローラーが連携して動作するための接着剤とみなすことができます。 AngularJS は、テンプレート、データ モデル、およびコントローラー内の情報とともにスコープを使用します。これらはモデルとビューを分離するのに役立ちますが、この 2 つは実際には同期しています。モデルへの変更はすぐにビューに反映され、ビューへの変更はすぐにモデルに反映されます。

AngularJS スコープのさらに詳しい理解については、AngularJS スコープのドキュメントを参照してください。

テスト

「AngularJS 方式」により、開発中のコードのテストが非常に簡単になります。コントローラーに新しく追加された次の単体テストを見てみましょう:

test/unit/controllersSpec.js:

コードをコピー コードは次のとおりです:

description('PhoneCat コントローラー', function() {

description('PhoneListCtrl', function(){

it('3 台の電話で「電話」モデルを作成する必要があります', function() {
var スコープ = {},
ctrl = 新しい PhoneListCtrl(スコープ);

Expect(scope.phones.length).toBe(3);
});
});
});

このテストでは、携帯電話配列に 3 つのレコードがあることを確認します (このテスト スクリプトをまだ理解する必要はありません)。この例は、AngularJS コードの単体テストを作成することがいかに簡単であるかを示しています。テストはソフトウェア開発の重要な部分であるため、開発者がより多くのテストを作成できるように、AngularJS でテストを簡単に構築できるようにしています。

AngularJS 開発者はテストを作成するとき、Jasmine Behavior-Driven Development (BBD) フレームワークの構文を使用する傾向があります。 AngularJS は Jasmine の使用を強制しませんが、チュートリアルのすべてのテストは Jasmine を使用して作成されます。 Jasmine の 公式ホームページ または Jasmine Wiki で関連知識を入手できます。

AngularJS ベースのプロジェクトは、JsTestDriver を使用して単体テストを実行するように事前構成されています。

次のようにテストを実行できます:

1. 別の端末で、angular-phonecat ディレクトリに入り、./scripts/test-server.sh を実行してテストを開始します (スクリプトを実行するには、Windows コマンド ラインで .scriptstest-server.bat と入力してください)。続いてスクリプト コマンドも同様に実行されます); 2. 新しいブラウザウィンドウを開き、http://localhost:9876; に移動します。 3. 「このブラウザを厳密モードでキャプチャする」を選択します。

この時点では、窓を脇に置いて、そのことを忘れても構いません。 JsTestDriver は単独でテストを実行し、結果をターミナルに出力します。

4. ./scripts/test.sh を実行してテストします。

次のような結果が表示されるはずです:

コードをコピー コードは次のとおりです:

クロム: ランナーをリセットします。

.
合計 1 テスト (合格: 1、失敗: 0、エラー: 0) (2.00 ミリ秒)
Chrome 19.0.1084.36 Mac OS: 1 つのテストを実行 (成功: 1、失敗: 0、エラー 0) (2.00 ミリ秒)


うん！テストに合格しました！そうでないのか... 注: テストの実行後にエラーが発生した場合は、ブラウザを閉じ、ターミナルに戻ってスクリプトを閉じてから、上記の手順をもう一度試してください。

練習

index.html に別のデータ バインディングを追加します。例:

コードをコピー コードは次のとおりです:

電話の総数: {{phones.length}}

新しいデータ モデル プロパティを作成し、テンプレートにバインドします。例:

コードをコピー コードは次のとおりです:

$scope.hello = "こんにちは、世界!"

ブラウザを更新して、「Hello, World!」と表示されるようにします。

イテレータを使用して単純なテーブルを作成します:

コードをコピー コードは次のとおりです:

<表>
行番号
{{i}}

ここで、データ モデル式を 1 ずつインクリメントしてみましょう:

コードをコピー コードは次のとおりです:

<表>
行番号
{{i 1}}

toBe(3) を toBe(4) に変更した後に単体テストが失敗することを確認してから、./scripts/test.sh スクリプトを再度実行します

概要

これで、いつでもテストできる個別のモデル、ビュー、コントローラーを備えた動的アプリケーションが完成しました。ここでステップ 3 に進み、全文検索機能をアプリケーションに追加できます。