2-Angularテンプレート

6713 ワード
AngularJSを使用して、controllerに追加したコードの実行可能性を同時にテストする時です.コード作成プログラムを整理する方法はたくさんありますが、Angularプログラムについては、モデル-ビュー-コントローラ(MVC設計モード)(当駅でも紹介しています)を使用してコードをデカップリングし、注目点を分離することを奨励します.この考えに対して、少しのAngularとJavaScriptでモデル、ビュー、コントローラコンポーネントを追加してください.
  • 現在、3つの携帯電話のデータが自動的に生成されています.

    • ワークスペースのリセット紹介ワークスペースを2ステップ目にリセット
    git checkout -f step-2

    ブラウザをリフレッシュするか、オンラインでチェックアウトする手順2:例2.ほとんどの重要な修正は以下の通りです.GitHubではすべての違いを見ることができます.
    ビューとテンプレート
    Angularでは、HTMLテンプレートを介して、ビューはモデルの投影です.これは、モデルが何を変更しても、Angularが適切なバインドポイントをリフレッシュしてビューをリフレッシュすることを意味します.ビューは、次のテンプレートを使用してAngularによって構築されます.
    <html ng-app="phonecatApp">
<head>
  ...
  <script src="bower_components/angular/angular.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

    手書きの携帯電話のリストをngRepeatコマンドと2つのAngular式で置き換えた.
  • <li>ラベルのng-repeat="phone in phones"属性はAngularリピータの命令です.リピータはAngularにテンプレートのようにリストの各携帯電話に<li>要素を作成するように伝えた.
  • 式は括弧で囲まれ、{{phone.name}}式と{{phone.snippet}}式は値で置き換えられます.
    • ng-controllerというコマンドを追加しました.<body>ラベルのPhoneListGtrlコントローラを添付します.
  • のカッコ内の式{{phone.name}}および{{phone.snippet}}は、データバインディングを表し、PhoneListCtrlコントローラでモデルを適用するために参照されます.

    • 注意:ng-app="phonecatApp"を使用してAngularモジュールの読み取りを定義しました.phonecatAppはモジュールの名前で、モジュールにはPhoneListsCtrlが含まれます.
    モデルとコントローラ
    次に、PhoneListCtrlコントローラでデータモデルがインスタンス化され、コントローラには$scopeパラメータを受け入れる簡単なコンストラクタがあります.app/js/controllers.js: 
    var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

    ここでは、AngularJSモジュールphoncatAppに登録されたPhoneListCtrlというコントローラを定義します.注意angularアプリケーションを起動すると、ng-app命令です(<html>で)phoneAppモジュールの名前をモジュールとして読み込むように指定しました.コントローラは現在よく機能していませんが、彼は重要な役割を果たしています.彼はコンテキスト環境からモデルを提供しています.コントローラはモデルとビューでデータバインディングを確立することができます.私たちは異なる点を接続して、紹介、データと論理の間で、以下のようにします.
  • ngControllerコマンドbodyラベルで、コントローラの名前を指します.PhoneListCtrl(javascripファイル上)
  • PhoneListCtrlコントローラは携帯電話のデータを$scopeに接続し、$scopeは私たちのコントローラに注入されます.この範囲はルート範囲のプロトタイプの子孫で、プログラムが作成されると定義され、コントローラ範囲は<body ng-controller="PhoneListCtrl">ラベル内のすべてのバインドに表示されます.

    • 範囲
    範囲の概念は非常に重要で、1つの範囲は接着剤と見なすことができて、テンプレート、モデルとコントローラが一緒に働くことを許可して、Angularは範囲を使って、テンプレート、モデル、コントローラの中のデータを互いに隔離させて、しかしまた同期します.モデルに対する変更はビューに反映され、ビューで発生する変更もモデルに反映されます.Angularの範囲についてもっと勉強して、angularの範囲のドキュメントを見てください.
    テスト
    開発中にAngularメソッドでビューからコントローラを操作すると、テストが容易になります.コントローラがグローバルネーミングスペースに表示されている場合は、mock範囲オブジェクトで簡単にインスタンス化できます.
    describe('PhoneListCtrl', function(){

  it('should create "phones" model with 3 phones', function() {
    var scope = {},
        ctrl = new PhoneListCtrl(scope);

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

});

    テストはPhoneListCtrlを実例化し、範囲内の携帯電話に3つの記録が含まれていることを検証した.この例は、Angularでユニットテストを作成するのがどんなに簡単かを証明している.テストがこのような決定的な部分になると、私たちはテストをAngularで作成しやすくするので、開発者にテストを書くことを奨励した.
    非グローバルコントローラのテスト
    実際には、コントローラがグローバル変数で動作したくないかもしれませんが、逆に、匿名のコンストラクタでphonecatApp に登録しているのを見ることができます.この事件では、Angularは $controllerのサービスを提供しています.彼は名前検索コントローラを通じて、ここでは$controllerで同じテストをします.
  • 各テストの前に、AngularにphonecatAppモジュールを読み込むように伝えました.
  • Angular $controllerサービスを私たちのテスト方法に要求します.
  • $controllerを使用してPhoneListCtrlインスタンスを作成します.
  • この例を使用して、範囲内の携帯電話のリストの3つの記録を検証します.

    • テストの書き込みと実行
    テストを書くとき、Angular開発者はJasmineの行為が開発フレームワークを駆動する文法が好きです.AngularはJasminの使用を要求しませんが、Jasmine v 1を使用します.3チュートリアルのすべてのテストを書いて、JasmineのトップページとJasmineのドキュメントでJasmineについてもっと勉強することができます.AngularシードプロジェクトはKarmaを使用してすべてのテストを実行するように事前に構成されていますが、Karmaと必要なプラグインがインストールされていることを確認し、npm installインストールを実行することができます.テストを実行し、ファイルの変更を確認します:npm test
  • KarmmaはChromeの新しいインスタンスを自動的に起動し、彼がバックグラウンドで実行することを無視することができ、Karmaは彼を使用してすべてのテストを実行します.
  • 端末では、次のような出力が表示される可能性があります.
    • info: Karma server started at http://localhost:9876/
  info (launcher): Starting  browser "Chrome"
  info (Chrome 22.0): Connected on socket id tPUm9DXcLHtZTKbAEO-n
  Chrome 22.0: Executed 1 of 1 SUCCESS (0.093 secs / 0.004 secs)

    はい、テストに合格したか、合格しなかったか......
  • ソースコードまたはtestを変更する限り、テストを再実行します.js,Karmaはこの修正に注意してテストを再実行します.どうですか.親切でしょう.

    • Karmaが開いているブラウザを最小化していないことを確認します.一部のOSでは、最小化ブラウザに割り当てられるメモリが限られています.これは、karmaテストの実行が遅い場合です.
    じっけんindex.htmlに別のバインドを追加します.次のようになります.
    <p>Total number of phones: {{phones.length}}</p>

    コントローラに新しいモデル属性を作成し、テンプレートにバインドします.たとえば、次のようにします.
    $scope.name = "World";

    次にindexにバインドを追加します.html 
    <p>Hello, {{name}}!</p>

    あなたのブラウザを更新して、彼が「Hello,Wolrd!」と言ったかどうかを確認します../test/unit/shontrollerSpec.js のコントローラからユニットテストを更新し、追加などの現在の変更を反射します.
    expect(scope.name).toBe('World');
    index.htmlのリピータを変更し、簡単なテーブルを作成します.
    <table>
 <tr><th>row number</th></tr>
 <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i}}</td></tr>
</table>

    次に、1から1つずつ増加するバインドを作成します.
    <table>
 <tr><th>row number</th></tr>
 <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>{{i+1}}</td></tr>
</table>

    興奮点:追加のng-repeatで8 x 8の表を作ってみましょう.toBe(4)の代わりにexpect(scope.phones.length).toBe(3)を修正し、ユニットテストに失敗させます.
    まとめ
    モデル、ビュー、コントローラのコンポーネントを分離した動的アプリケーションがあり、テストしました.次に、アプリケーションに全文検索を追加する方法を学びます.原文住所:https://docs.angularjs.org/tutorial/step_02
    LaTeX簡易チュートリアル
    ActiveStorageにバリデーションを設定する方法