個人的には、角度の動作メカニズムをよく理解する必要があると思います。そうすれば、できるだけピットに落ちないようにします。この記事では、オンライン情報と私自身の理解に基づいて、Angularjsが行ったことをより明確かつ詳細に分析します。
まず、Angularが段階的に行ったことを見てみましょう。
<
ブラウザを使用してindex.htmlにアクセスすると、ブラウザは次のことを行います。
プロセス全体は、この写真で表すことができます。
OK、上記の例を介して、AngularJがどのように段階的にページをレンダリングするかを理解できます。それでは、ブラウザのイベントループとどのように対話するのでしょうか？または、ユーザーとどのように対話しますか？簡単に言えば、主に3つの段階に分かれています。
1.ブラウザのイベントループは、ユーザーインタラクション、タイミングイベント、ネットワークイベント（サーバーの応答など）など、イベントがトリガーされるのを待っています。
2。イベントがトリガーされると、JavaScriptコンテキストに入力され、DOMは一般にコールバック関数によって変更されます。
3。コールバック関数が実行された後、ブラウザは新しいDOMに従って新しいページをレンダリングします。
以下の図に示すように、相互作用プロセスは主にいくつかのサイクルで構成されています。
AngularJSは一般的なJavaScriptワークフローを変更し、独自のイベント処理メカニズムを提供します。これにより、JavaScriptコンテキストが2つの部分に分離されます。1つはネイティブJavaScriptコンテキスト、もう1つはAngularJSコンテキストです。 AngularJSコンテキストでの操作のみが、Angularデータバインディング、例外処理、プロパティウォッチング、その他のサービスを楽しむことができます。ただし、Angularは部外者では無視されません（ネイティブJavaScript操作、カスタマイズされたイベントコールバック、サードパーティライブラリなど）。 AngularJSが提供する$ Apply（）関数を使用して、これらの部外者をAngularJSコンテキストに包むことができます。
次に、これらのサイクルがインタラクションプロセス中にどのように機能するかを見てみましょう。
1.まず、ブラウザはリスニング状態になります。イベントがトリガーされると、イベントキューに追加され、イベントキューのイベントが1つずつ実行されます。
2.イベントキューのイベントが$ apply（）でラップされている場合、Angularjsのコンテキストが入力されます。 fn（）は、angularjsのコンテキストで実行したい関数です。
3。AngularJSはFN（）関数を実行します。通常、この関数はアプリケーションの一部の状態を変更します。
4。その後、Angularjsは2つの小さなループで構成される$ Digestループを入力します。 1つのループを使用して、$ evalasyncキュー（ビューをレンダリングする前に処理する必要がある操作をスケジュールするために使用されます。通常は、setimeout（0）を通じて実装されます。 1つのループを使用して、$ watchリスト（いくつかの式のコレクションのコレクション。変更が発生すると、$ watch関数が呼び出されます）。 $ Digestループは、$ evalasyncキューが空で、$ watchリストも空であることを知っている場合、繰り返し続けます。つまり、モデルは変更されなくなります。
5. Angularjsの$ Digestループが終了すると、実行全体がAngularJSとJavaScriptのコンテキストを残し、データが変更された後にブラウザがビューを再レンダリングします。
次に、コードと組み合わせて分析しましょう。
<！doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <入力ng-model = "name"> <p> hello {{name}}！</p> </body> </html> </html> </html>このコードと前のコードの唯一の違いは、ユーザー入力を受信する入力があることです。このHTMLファイルにブラウザを使用してアクセスすると、入力のNG-Modelディレクティブはキーダウンイベントを入力にバインドし、$ watchを名前変数に推奨して、変数値の変更の通知を受け取ります。インタラクティブフェーズでは、次の一連のイベントが主に発生します。
1.ユーザーがキーボードのキーを押すと（たとえば、a）、入力のキーダウンイベントがトリガーされます。
2。入力に関する命令は、入力の値の変更を検出し、$ apply（ "name = 'a'"）を呼び出して、AngularJSコンテキストでモデルを更新します。
3。Angularjsは名前を付けます。
4。$ digestループが開始され、$ watchリストは名前値の変更を検出し、{{{name}}式に通知してDOMを更新します。
5. AngularJSのコンテキストを終了し、JavaScriptのコンテキストでキーダウンイベントを終了します。
6.ブラウザはビューを再レンダリングします。
上記は、Angularjsの実用的な原則に関する情報のコレクションです。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！