実際、誰がターゲットを絞るべきか、どこで執筆を始めるべきかわからないので、簡単なアイデアに従って書き始めます。
1.Angular.Element
2.Angular.BootStrap
NG-APPがノードに適用されていることは非常に明確であり、Angularは自動的に初期化に役立ちます。初期化プロセスは、次の手順に分割されます
1.ドキュメントロードの場合、角度は自動的に初期化され、最初に、NG-APPディレクティブによって指定されたノードが見つかります。
2。モジュール関連の命令の読み込み
3.アプリケーション関連のインジェクター（依存マネージャー）を作成する
4.ルートノードとして確立されたNG-APPでDOMをコンパイルし始めます
次に、それを初期化し、NG-APP指令に相当するものを作成します。 Angular.Elementこれはラッパーであり、元のDom ElementまたはHTML文字列をjQuery要素としてラッピングします。 angular.bootstrapはスクリプトを手動で初期化できます。これら2つを使用してこのスクリプトを初期化します
コードコピーは次のとおりです。
<！doctype html>
<html lang = "zh-cn">
<head>
<メタcharset = "utf-8">
<title> bootstrap-manual </title>
<style type = "text/css">
.ng-cloak {
表示：なし;
}
</style>
</head>
<body>
これはng-appの外側です~~ {{1+2}}
<div id = "widuu">これはng-app ~~~ {{1+2}} </div>にあります
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
angular.element（document）.ready（function（）{
angular.bootstrap（angular.element（document.getElementbyId（ "widuu"）））;
}）;
</script>
</body>
</html>
2.コンピラー
公式のAngularJSドキュメントは、NGAPP、NGMODULE、NGBINDなどのラクダの命名法でいっぱいであることが明確にわかります。その中で、HTMLコンパイラを使用すると、自分で要素属性とタグを定義できます。 Angularは、これらの追加の動作指示を呼び出します。
公式ドキュメントでは、このようなコンパイラについて説明しています
コードコピーは次のとおりです。
コンパイラ
コンパイラは、属性を探しているDOMを横断する角度サービスです。編集プロセスは2つのフェーズで行われます。
コンパイル：DOMを通過して、すべてのディレクティブを収集します。結果はリンク関数です。
リンク：ディレクティブをスコープと組み合わせて、ライブビューを作成します。スコープモデルの変更はビューに反映され、ビューとのユーザーのやり取りはスコープモデルに反映されます。これにより、スコープモデルが単一の真実の源になります。
コレクション内の各アイテムに対して、NG-ReepeatクローンDOM要素などの一部の指令。クローンテンプレートを1回だけコンパイルする必要があるため、クローンインスタンスごとに1回リンクする必要があるため、コンパイルとリンクフェーズを使用するとパフォーマンスが向上します。
コンパイラは角度サービスであり、DOMノードを通過してプロパティを見つけることを担当しています。編集は2つの段階に分かれています。
1。コンパイル：ノードを通過してすべてのディレクティブを収集し、リンク関数を返します
2。リンク：ディレクティブをスコープにバインドし、ライブビューを作成します。スコープの変更はすべてビューに反映されます（ビューを更新）。テンプレートへのユーザーのアクティビティ（変更）は、スコープモデル（双方向結合）に反映されます。これにより、スコープモデルは正しい値を反映できます。
NG-Reepeatなどの一部の指令は、コレクション内の各要素に対して特定の要素（組み合わせ）を1回コピーします。コンパイルとリンクは、パフォーマンスを改善するための2つの段階です。クローン化されたテンプレートは一度コンパイルする必要があるため、各コレクションの要素を一度リンクする必要があるため（テンプレートキャッシュに似ています）。
3.独自のディレクティブを段階的に作成します
1。指令を理解します
まず第一に、指令はngmoduleなどのラクダの命名法に基づいていることを理解しています。コンパイルするとき、試合は次のようなものです。
コードコピーは次のとおりです。
<入力ng-model = "foo">
<入力data-ng：model = "foo">
ディレクティブはx-またはdata-をプレフィックスとして使用し、次のようにキャメル命名方法を変換するために：、 - 、または_などを使用できます。
コードコピーは次のとおりです。
<span ng-bind = "name"> </span> <br/>
<span ng：bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
一般的に、ng-bindを使用してngbindに対応するこの形式
$コンパイルは、要素名、属性、クラス名、コメントに基づいてディレクティブを一致させることができます
コードコピーは次のとおりです。
<my-dir> </my-dir>
<span my-dir = "exp"> </span>
<！ - 指令：my-dir exp->
<span> </span>
コンピレーションプロセス中、コンパイラは$補間サービスを通じて属性（{{{Something}}}など）に埋め込まれた式とテキストを一致させます。これらの式は時計として登録され、ダイジェストサイクルの一部として一緒に更新されます。ここに簡単な補間があります：
<img src = "img/{{username}}。jpg"/> hello {{username}}！
2。コンピレーション手順
HTMLを「コンパイル」するための3つのステップ：
1.最初に、ブラウザの標準APIを介してHTMLをDOMオブジェクトに変換します。これは非常に重要なステップです。テンプレートは解析可能でなければならないため（仕様に準拠しています）。これは、一般にDOM要素ではなく文字列に基づいているほとんどのテンプレートシステムと比較できます。
2。domのコンパイルは、$ comple（）メソッドを呼び出すことによって行われます。このメソッドはDOMを横断し、指令に一致します。試合が成功した場合、対応するDOMと一緒にディレクティブリストに追加されます。指定されたDOMに関連付けられているすべてのディレクティブが識別される限り、それらは優先順位でソートされ、その順序でコンパイル（）関数を実行します。ディレクティブコンパイル関数には、DOM構造を変更する機会があり、リンク（）関数の解析を生成する責任があります。 $ compile（）メソッドは、ディレクティブ自体のコンパイル関数によって返されるリンク関数のコレクションである結合リンク関数を返します。
3.前のステップで返されたリンク関数を介して、テンプレートをスコープに接続します。これにより、ディレクティブ自身のリンク関数を呼び出し、要素にリスナーを登録し、スコープでいくつかの時計を作成できます。これは、範囲とDOMの間の双方向の瞬時の結合です。スコープが変更されると、DOMは対応する応答を取得します。
コードコピーは次のとおりです。
var $ compile = ...; //コードに注入されます
var scope = ...;
var html = '<div ng-bind =' exp '> </div>';
//ステップ1：HTMLをDOM要素に解析します
var template = angular.element（html）;
//ステップ2：テンプレートをコンパイルします
var linkfn = $ compile（Template）;
//ステップ3：コンパイルされたテンプレートをスコープにリンクします。
linkfn（scope）;
NGATTR属性バインディング
コードコピーは次のとおりです。
<svg>
<circle ng-attr-cx = "{{cx}}"> </circle>
</svg>
それは今日すべてであり、明日指令を作成するために書き始めます~~~制御長はあまり長くないはずです、この章には多くの主要な概念があります~~~