概要
AngularJSのHTMLコンパイラにより、ブラウザは新しいHTML構文を認識できます。これにより、行動をHTML要素または属性に関連付けることができ、カスタム動作を備えた新しい要素を作成することもできます。 Angularjsはこの動作を「指示」に拡張します
HTMLには、静的ページを書くときに形式を制御するための多くの宣言的構造があります。たとえば、コンテンツを中央に配置したい場合は、「ウィンドウの中間点を見つけてコンテンツの中央を組み合わせる」ためにブラウザに指示する必要はありません。中心にする必要がある要素にAlign = "Center"属性を追加するだけです。これが宣言言語の力です。
しかし、宣言言語には達成できないものもあり、その理由の1つは、ブラウザが新しい構文を認識できるようにするためにそれを使用できないことです。たとえば、コンテンツを中心にしていないが、左の1/3までの場合、それはできません。そのため、ブラウザが新しいHTML構文を学習できるようにする方法が必要です。
AngularJSの学生は、アプリの作成に非常に役立ついくつかの指示から来ています。また、独自のアプリケーションに役立ついくつかの指示を作成できることを願っています。これらの拡張命令は、アプリを作成する「ドメイン固有言語」です。
コンピレーションプロセスは、ブラウザ側で発生します。サーバー側は、どのステップにも参加しません。また、事前コンパイルされません。
共同
コンパイラは、Angularjsが提供するサービスです。 DOMを通過することにより、それに関連するプロパティを検索します。コンパイルプロセス全体が2つの段階に分かれています。
1。コンパイル：DOMを通過し、関連するすべての指示を収集して、リンク関数を生成します。
2。リンク：スコープを指令にバインドし、動的ビューを生成します。スコープモデルの変更はビューに反映され、ビュー上のユーザーアクションはスコープモデルに反映されます。これにより、スコープモデルは、ビジネスロジックで気にする必要がある唯一のものになります。
Ng-Reepeatなど、データセットのすべてのDOM要素を1回クロームするような指示がいくつかあります。コンピレーションプロセス全体を2つの段階に分割する慣行は、編集とリンクが全体的なパフォーマンスを改善するため、クローン化されたテンプレートを合計1回だけ編集し、それぞれのモデルインスタンスにリンクする必要があるためです。
命令
この指令は、「関連するHTML構造がコンパイルフェーズに入るときに実行されるべきアクション」を示します。ディレクティブは、要素の名前、属性、CSSクラス名、およびコメントで書くことができます。以下は、同じ関数でNG-Bindディレクティブを使用するいくつかの例です。
コードコピーは次のとおりです。
<span ng-bind = "exp"> </span>
<span> </span>
<ng-bind> </ng-bind>
<！ - 指令：ng-bind exp->
ディレクティブは、基本的に、コンパイラが関連するDOMにコンパイルされるときに実行する必要がある関数にすぎません。ディレクティブAPIドキュメントにディレクティブに関する詳細情報を見つけることができます。
以下は、要素をドラッグ可能にするコマンドです。 <Span>要素のドラッグ属性に注意してください。
index.html：
コードコピーは次のとおりです。
<！doctype html>
<html ng-app = "drag">
<head>
<スクリプトsrc = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<スクリプトsrc = "script.js"> </script>
</head>
<body>
<スパンドラッグ>ドラッグ</span>
</body>
</html>
script.js：
コードコピーは次のとおりです。
Angular.module（ 'drag'、[]）。
ディレクティブ（ 'Draggable'、function（$ document）{
var startx = 0、starty = 0、x = 0、y = 0;
return function（scope、element、attr）{
element.css（{
ポジション： '相対'、
境界線： '1px Solid Red'、
BackgroundColor：「LightGrey」、
カーソル：「ポインター」
}）;
element.bind（ 'mousedown'、function（event）{
startx = event.screenx -x;
starty = event.screeny -y;
$ document.bind（ 'mousemove'、mousemove）;
$ document.bind（ 'mouseup'、mouseup）;
}）;
function mousemove（event）{
y = event.screeny -starty;
x = event.screenx -startx;
element.css（{
トップ：Y + 'PX'、
左：x + 'px'
}）;
}
function mouseup（）{
$ document.unbind（ 'mousemove'、mousemove）;
$ document.unbind（ 'mouseup'、mouseup）;
}
}
}）;
この新しい動作は、Draggable属性を追加することで実現できます。改善の美しさは、ブラウザに新しい機能を提供することです。開発者がHTMLルールに精通している限り、新しい動作と新しい構文を理解するブラウザの能力を拡張するための自然な方法を使用しました。
ビューを理解してください
オンラインで多くのテンプレートシステムがあります。それらのほとんどは、「静的文字テンプレートとデータをバインドし、新しい文字を生成し、innerhtmlを介してページ要素に挿入します」。
これは、データを変更すると、テンプレートが新しい文字を生成してからDOMに挿入すると、データが再結合されることを意味します。発生する問題には、ユーザー入力を読み取り、モデルデータと組み合わせる必要があり、ユーザーの入力を上書きする必要があり、更新プロセス全体を手動で管理する必要があり、リッチな表現の欠如が必要です。
Angularjsは異なります。 AngularJSコンパイラは、文字列テンプレートではなく、命令でDOMを使用します。リンク関数を返し、スコープモデルと組み合わせて動的ビューを生成します。このビューとモデルの結合プロセスは「透明」です。開発者は、ビューの更新について何もする必要はありません。また、アプリケーションはinnerhtmlを使用していないため、ユーザーの入力を上書きする必要はありません。より具体的には、Angularの指令は、文字列バインディングを使用するだけでなく、動作を示す構造を使用することもできます。
AngularJSコンピレーションは、「安定したDOM」を生成します。これは、データモデルにバインドされたDOM要素のインスタンスが、バインディングのライフサイクル中に変化しないことを意味します。これはまた、テンプレートとデータが組み合わされたときにこの参照が失われることを心配することなく、コードがDOM要素のインスタンス参照を取得し、イベントを登録できることを意味します。