AnglarJS開発ガイド11:AnglarJSのモデル、control、view詳細

8506 ワード
制御装置
モデルmodelという語は、AnglarJSにおいて、1つ(例えば、phonesというmodelという、1つの値は、複数のphoneを含む配列である)のオブジェクトを表してもよく、適用中のデータモデル全体を表してもよく、これは私たちが議論しているAnglarJSファイルのコンテキストに依存しています.
AnglarJSでは、モデルはAnglarJSのスコープオブジェクトのいずれかの望ましい属性である.属性の名前は模型の表示子です.その値は任意のJavascriptオブジェクト(配列および元のオブジェクトを含む)でありうる.
Javascriptオブジェクトをモデルにする唯一の要求は、このオブジェクトがAnglarJSスコープの属性参照である必要があります.この引用は明示的にも陰的にも作成できる.
以下のように明示的にスコープ属性を作成できます.Javascriptオブジェクトを参照してください.
  • は、Javascriptコードの中で直接に一つのオブジェクトを作用領域オブジェクト属性に割り当てる.この場合はコントローラによく見られます.
     function MyCtrl($scope) { // create property 'foo' on the MyCtrl's scope // and assign it an initial value 'bar' $scope.foo = 'bar'; }
  • テンプレートに式を使う:<button ng-click="{{foos='ball'}}">Click me</button>
  • は、テンプレートにngInitコマンドを使用する(例に適用するだけで、実際のアプリケーションで使用することは推奨されない):<body ng-init=" foo = 'bar' ">
    • 次のようなテンプレート構造を処理すると、AnglarJSは暗黙的に(スコープオブジェクトの属性を作成し、適切な値を付与することによって達成される)モデルを作成します.
  • は、input、select、textareaまたは他のフォーム要素の中から:<input ng-model="query" value="fluffy cloud">
    • 上記のコードは、現在のスコープにqueryというモデルを作成し、値は「fluffy cloud」に設定されている.
  • は、ngRepeaterの反復声明の中で、<p ng-repeat="phone in phones"></p>
    • 上のコードは、phones配列のそれぞれにサブスコープを作成します.そして、それぞれの作用領域にphoneというオブジェクト(モデル)が作成され、その値は配列中の現在の値に設定されている.
    コントローラ
    AnglarJSでは、コントローラは、ルートのスコープ以外の作用領域のインスタンスを強化するためのJavascript関数である.あなたまたはAnglarJS自身がscope.$newを介して新しい副作用領域オブジェクトを作成すると、パラメータとしてコントローラに渡すオプションがあります.これは、AnglarjSがコントローラとこの作用領域を関連づけて、作用領域の挙動を強化することができる.
    コントローラ用:
  • は、スコープオブジェクトの初期状態を設定する.
  • は、スコープオブジェクトに動作を増加させる.
    • オブジェクトに作用する初期状態を設定します.
    一般的に、アプリケーションを作成するときは、そのスコープに初期状態を設定する必要があります.
    AnglarJSは、スコープの初期状態を設定するために、スコープオブジェクトに対してコントローラの構造関数を呼び出すことになる.これは、AnglarJSがコントローラタイプのインスタンスを作成しないことを意味しています.コントローラは常に、既存のスコープオブジェクトに対して呼び出します.
    モデル属性を作成することによって初期の作用領域の初期状態を設定することができます.たとえば:
    function GreetingCtrl($scope) { $scope.greeting = 'Hola!'; }
    GreeetingCtrlコントローラは、greetingというテンプレートで呼び出すことができるモデルを作成しました.
    スコープオブジェクトへの挙動の追加
    AnglarJSのスコープオブジェクトの挙動は、スコープの方法によって表される.これらの方法はテンプレートまたはビューで呼び出すことができる.これらの方法と応用のモデルは相互作用し,モデルを変えることができる.
    モデルの章で言ったように、どのオブジェクト(または元のタイプ)も作用ドメインに割り当てられてからモデルになります.任意のスコープに割り当てられた方法は、テンプレートまたはビューで呼び出すことができ、式またはngイベント命令で呼び出すことができる.(例えば、ngClick)
    私たちはコントローラをどのように正しく使いますか?
    総じて言えば、一つのコントローラは多すぎる仕事をしてはいけません.単一のビューのトラヒックロジックだけを含むべきです.
    コントローラの役割を単一に保つための最も一般的なやり方は、コントローラに属さない作業をサービスから切り離し、依存注入によってコントローラにこれらのサービスを使用することである.これは注入サービスに依存するセクションで詳細に議論されます.
    コントローラを使って次のことをしないでください.
  • コントローラは、業務ロジックのみに関心を持つべきです.DOM操作(表現層論理)は通常テストを難しくします.任意の表現層論理をコントローラに置くと、業務ロジックのテスト難易度が著しく増加します.AnglarJSは、自動的にDOM動作を行うためのdev_guide.templates.databindingを提供する.DOMを手動で操作する必要があると、表現層の論理が命令から外れます.
  • 入力フォーマットに対して、アングラーJSのフォーム制御を使ってフォーマットを実現するべきです.
  • 対出力フォーマットはAnglarJSのフィルタで実現するべきです.
  • 実装コンポーネントまたは他のコンポーネントのライフサイクルを制御する(例えば、サービスを作成する例)
    • .scope.$newでコントローラとスコープオブジェクトの表示を関連付けるか、または暗黙的にngController命令または$routeサービスを介して連絡することができます.
    最後に、私達は実例を使ってcontrolerを説明します.
    AnglarJSのコントローラコンポーネントの動作原理を説明するために、次のようなコンポーネントを持つ小さなアプリケーションを作成します.
  • ボタンとメッセージがあるテンプレート
  • はspiceという文字列モデルです.
  • つの方法を持つコントローラSpicyCtrl.この2つの方法は、spiceの値を設定するために用いられる.
    • <body ng-controller="SpicyCtrl">
 <button ng-click="chiliSpicy()">Chili</button>
 <button ng-click="jalapenoSpicy()">Jalapeño</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.chiliSpicy = function() {
   $scope.spice = 'chili';
 }
 $scope.jalapenoSpicy = function() {
  $scope.spice = 'jalapeño';
 }
}
     
    テンプレート内のメッセージ(p要素中の内容)は、spiceモデルに対する結合を含み、最初の文字列は「very」である.このspiceモデルはchiliまたはjalapenoに設定されます.これはどのボタンがクリックされるかによって決まります.メッセージは を通じて自動的に更新される.例では次のような注意が必要です.
  • ngControllerコマンドは、テンプレートのためのスコープを作成するためのものである.この作用領域は、命令で指定されたspicyCtrlコントローラを使用して強化される.
  • は、ロールドメインオブジェクトに新しい属性を与えると、モデルを作成または更新する.
  • コントローラで使用される方法は、テンプレートで呼び出すことができます.
    • .
  • AnglarJSの古いバージョン(1.0RC以前の)は、自動的にスコープオブジェクトのプロトタイプに方法を追加します.今はできません.すべての方法を手動でスコープに追加しなければなりません.
    • コントローラの方法はパラメータを受け入れることができます.
    <body ng-controller="SpicyCtrl">
 <input ng-model="customSpice" value="wasabi">
 <button ng-click="spicy('chili')">Chili</button>
 <button ng-click="spicy(customSpice)">Custom spice</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.spicy = function(spice) {
   $scope.spice = spice;
 }
}
    SpicyCtrlコントローラでは、spicyという方法だけが定義されています.spiceというパラメータを受け取ります.このコントローラに関連するテンプレートは、第1のボタンイベントにおいて、1つのchili定数をコントローラに伝達し、第2のボタンにおいてモデル属性を伝達する.
    コントローラ継承例:
    AnglarJSにおけるコントローラの継承は、例えば、作用領域の継承に基づいています.
    <body ng-controller="MainCtrl">
 <p>Good {{timeOfDay}}, {{name}}!</p>
 <div ng-controller="ChildCtrl">
   <p>Good {{timeOfDay}}, {{name}}!</p>
   <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
</body>

function MainCtrl($scope) {
 $scope.timeOfDay = 'morning';
 $scope.name = 'Nikki';
}

function ChildCtrl($scope) {
 $scope.name = 'Mattie';
}

function BabyCtrl($scope) {
 $scope.timeOfDay = 'evening';
 $scope.name = 'Gingerbreak Baby';
}
    注意してください.私たちはどうやってテンプレートに私たちのngControllerコマンドを嵌めましたか?このテンプレート構造は、アングラーJSをビューに4つの作用領域を作成します.
  • 本の作用領域
  • MainCtrlスコープは、モデルtimeOfDayとモデルnameを含んでいます.
  • Child Ctrlスコープは、上位のスコープのtimeOfDayを引き継ぎ、nameを複写した.
  • BabyCtrlスコープは、MainCtrlで定義されたtimeOfDayとChildCtrlのnameを複写した.
    • コントローラの継承とモデル継承は同じ原理です.
    注意:従来の原型継承はコントローラには機能しません.前に述べたように、コントローラは直接的に実行されるのではなく、スコープオブジェクトに対して呼び出されるからです.
    ビュー
    アングラーJSでは、ビューとは、ブラウザがローディングしてレンダリングした後、アングラーJSでテンプレート、コントローラ、モデル情報に基づいて、DOMを変更することを意味する.
    アングラルJSのMVC実現においては、モデルとコントローラを知るためのものとなります.図は、モデルの双方向バインディングを知っていて、ビューは、ngControllerおよびngViewの命令のようなコントローラを命令によって知ることができ、また、{{someControllerFunction()}}のようなバインディングによって知ることができる.このようにして、ビューは、対応するコントローラの方法を呼び出すことができる.
     
     
     
    頑張って!
    JS判定ブラウザタイプとバージョン