双方向データバインド---AngularJSの基本原理学習

Angular JS(Angular.JS)は、Webページを開発するためのフレームワーク、テンプレート、およびデータバインドおよびUIコンポーネントの豊富なセットです.開発プロセス全体をサポートし、手動DOM操作を必要とせずにWebアプリケーションのアーキテクチャを提供します.AngularJSは小さく、60 Kしかなく、主流ブラウザと互換性があり、jQueryとの相性が良い.双方向データバインディングはAngularJSの最もクールで最も実用的な特性であり、MVCの原理を徹底的に示している.
AngularJSの動作原理は,HTMLテンプレートがブラウザによってDOMに解析され,DOM構造がAngularJSコンパイラの入力となることである.AngularJSはDOMテンプレートを巡回し、対応するNGコマンドを生成します.すべてのコマンドはview(つまりHTMLのng-model)に対してデータバインドを設定します.したがって、NGフレームは、DOMのロードが完了する後に機能する. 
以下のように簡単に使用します.
htmlで:

js:

// angular app
var app = angular.module("ngApp", [], function(){
    console.log("ng-app : ngApp");
});

// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
    console.log("ng-controller : ngCtl");
    $scope.myLabel = "text for label";
    $scope.myInput = "text for input";

    $scope.btnClicked = function() {
    	console.log("Label is " + $scope.myLabel);
    }
}]);

上記のように、htmlでangularのappを定義し、angularのcontrollerを指定すると、このcontrollerは1つの役割ドメインに対応する($scope接頭辞で役割ドメインの属性や方法などを指定することができる).このngCtlの役割ドメイン内のHTMLタグは、その値や操作が$scopeでjsの属性やメソッドにバインドできる. 
これにより、HTMLに表示するviewとAngularJSのデータとが一致するNGの双方向データバインドが実現される.一方を修正すると、対応する他端もそれに応じて変化する.
このような方法は、本当に便利です.HTMLタグのスタイルとjsにおけるangular controllerの役割ドメインでバインドされた属性と方法にのみ関心を持っている.それだけで、多くの複雑なDOM操作をすべて省略する.
このような考え方は、実はjQueryのDOMクエリーや操作とは全く異なるので、AngularJSを使うときは、jQueryを混ぜて使わないことをお勧めする人も多いようです.もちろん、両者にはそれぞれ優劣があり、どちらを使うかは自分の選択次第だ.
NG中のappは1つのモジュールmoduleに相当する、各appにおいて複数のcontrollerを定義することができ、各controllerにはそれぞれの役割ドメイン空間があり、互いに干渉しない.
下の部分を見てください.

      ： 

      ： 

      ： {{ quantity * price }}

あなたは驚いて発見することができて、1行のJSコードを書く必要もなくて、計算を完成してインタフェースで結果を展示することができます. 
すなわち、フロントエンドhtmlにおいて{{}}で囲む変数は、AngularJSに対応するcontrollerの役割ドメイン内の属性にバインドされている.実際、{{}}はng-bind命令に等しい、すなわちng-bind="myData"はNG中のmyDataデータをフロントエンド対応要素にバインドすることができる.これにより、NGから任意のデータを取得する、リアルタイムでページに表示することが非常に容易になる.
また、$scopeオブジェクトには、htmlページの更新を行うための$applyメソッドも用意されています.

$scope.$apply(function(){
	$scope.myValue = "NewValue";
});

$scopeオブジェクトは、NGフレームワークの1つの役割ドメインオブジェクトと理解することができ、この役割ドメイン内でデータとビューの相互バインドを行うことができ、同時に他の$scopeオブジェクトの役割ドメインと隔離することができる. 
もちろん、$scopeは継承を実現することも可能であり、この部分は後でNGフレームの他のオブジェクトに接触するときにそれぞれ記録する.