元のテキストは継続され、本は引き続き続きます。 。 。それでもhttp://code.angularjs.org/1.0.2/docs/guide/compilerを参照してください
1。概要
AngularのHTMLコンパイラにより、開発者は新しいHTML構文をカスタマイズできます。コンパイラを使用すると、任意のHTML要素または属性、または新しいHTMLタグ（属性）に動作を添付できます（<beautiful girl = "cf"> </beautiful>など）。 Angularは、これらの追加の動作指示を呼び出します。
HTMLには、静的ドキュメントを特異的にフォーマットする多くの事前定義されたHTMLスタイル構造があります（タグ付きコンテンツの表示方法をブラウザに伝えることができます）。何かを中心にする必要があると仮定し、ブラウザにそれを行う方法を教える必要はありません（ここでは省略されています）。中央に配置する必要があるタグにAlign = "Center"を追加するだけです。これは宣言的な言語の素晴らしいところです。
しかし、宣言言語には制限もあります。つまり、事前定義された範囲外で構文を処理する方法をブラウザに伝えることはできません。たとえば、ブラウザにブラウザの1/3を整列させる方法を非常に単純に伝えることはできません。そのため、ブラウザを時代とともに動かし続け、新しい文法を学ぶ方法が必要です。
Angularは、アプリケーションの構築に役立ついくつかの指令を事前にバインドします。また、独自のアプリケーション向けのユニークなディレクティブを作成することもできます。これらのディレクティブ拡張機能は、独自のアプリケーションの「ドメイン固有言語」になります。
これらのコンピレーションは、ブラウザ側でのみ発生し、サーバー側の側面やプレリコンパイルの手順は必要ありません。
2。コンパイラ
角度サービスとして、コンパイラはDOM構造を通過してプロパティを見つける責任があります。編集プロセスは2つの段階に分かれています。
1.コンパイル：DOMノードツリーを通過し、すべてのディレクティブを収集します。結果はリンク関数です。
2。リンク：ディレクティブをスコープにバインドし、ライブビューを作成します。スコープの変更はすべてビューに反映されます（ビューを更新）。テンプレートへのユーザーのアクティビティ（変更）は、スコープモデル（双方向結合）に反映されます。これにより、スコープモデルは正しい値を反映できます。
NG-Reepeatなどの一部の指令は、コレクション内の各要素に対して特定の要素（組み合わせ）を1回コピーします。コンパイルとリンクは、パフォーマンスを改善するための2つの段階です。クローン化されたテンプレートは一度コンパイルする必要があるため、各コレクションの要素を一度リンクする必要があるため（テンプレートキャッシュに似ています）。
3。指令
指令とは、コンピレーション中に特定のHTML構造が発生したときにトリガーされる動作です。指令は、要素の名前、属性、クラス、さらにはコメントに配置できます。 NG-Bind（組み込み指令）を参照するいくつかの方法を以下に示します。
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <！ - directive：ng-bind exp->
ディレクティブは、コンパイラがDOMで遭遇するときに実行する関数にすぎません。ディレクティブAPIドキュメントでは、ディレクティブを作成する方法を詳細に説明しています。
これは、マウスで要素を非表示に再生できるようにするサンプルです...
<！doctype html> <html lang = "zh-cn" ng-app = "hideankseek"> <head> <meta charset = "utf-8"> <title> hidden and seek </title> <style type = "text/css"> .ng-cloak {dibracs：neny; } </style> </head> <body> <span wildcat>触れてすぐに逃げました~~ ~~ </span> <スクリプトsrc = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> angular.module （$ document）{var maxleft = 400、maxtop = 300; "Position"： "Absolute"、 "Border"： "1px Solid Green"}）; }）（parseint（） * 10000％msg.length））;任意の要素に「WildCat」属性を追加すると、要素に新しい動作ができます。このようにして、私たちはブラウザに隠れて探している要素に対処する方法を教えました（心配しないでください、あなたは特定の部屋にいない、あなたは吊るさないでください-_-！）。このアプローチを通じて、ブラウザの「語彙」を拡張しました。これは、HTMLルールに精通している人にとっては比較的自然な方法です。
今は夜遅く、明日は続けます。 。 。広告の後に会いましょう
=====================ゴージャスな分割線=================================================
4。ビューを理解する（ビュー）
通常、テンプレート文字列を介してデータに接続し、最終的なHTML文字列を生成し、innerhtml属性を介して結果を要素に書き込む多くのテンプレートシステムがあります。
これは、データが変更された場合、データとテンプレートを再び文字列に統合し、対応する要素にinnerhtmlとして書き戻す必要があることを意味します。ここにはいくつかの問題があります：（ここでは文字通りの翻訳を本当に理解できません... yyのみ）そのようなシーンがあると仮定し、テンプレートには入力ボックスが含まれています。ユーザーが入力ボックスを入力し、テンプレートが同期して更新されます。通常のテンプレートは、innerhtml、文字列、データ接続を介してビューを更新します。これにより、ユーザーの入力が中断され、悪い経験があります。
Angularはユニークです。 Angularコンパイラ（コンパイラ）は、文字列テンプレートを処理するのではなく、ディレクティブを通じてDOMを処理します。処理結果は、スコープモデルと組み合わせてリアルタイムテンプレートを生成するリンク関数です。スコープモデルへのビューの結合は、私たちにとって透明です。開発者は、ビューやモデルを更新するためにアクションを実行する必要はありません。さらに、ビューテンプレートはinnerhtmlで更新されないため、ユーザーの入力は中断されません。さらに、Angularディレクティブは、テキスト値をバインドするだけでなく、行動構成要素でもあります。
角度のこの処理方法は、安定したDOMを生成します。これは、DOM要素のライフサイクル中に、特定のモデルのインスタンスに常に拘束され、この関係は変わらないことを意味します。これはまた、コードがDOMオブジェクトへの参照を保持し、イベント機能を登録することができ、この参照はテンプレートデータのマージによって破壊されないことを意味します。