元のアドレス：http：//code.angularjs.org/1.0.2/docs/guide/concepts
続く。 。
1。概要
この記事では、主にAngularコンポーネントの概要を説明し、それらがどのように機能するかについて説明します。リストは次のとおりです。
2。起動
Angularの開始方法は次のとおりです（次の例でチャートを参照してください）：
1.ブラウザはHTMLをロードし、HTMLタグをDOMオブジェクトに変換します。
2。ブラウザはangular.jsのスクリプトをロードします。
3。domcontentloadedイベントをAngularが待機します。
4. Angularは、アプリケーションの境界範囲を指定するために使用される指令であるNG-APPの探しられます。
5。NG-APPに指定されたモジュール（おそらくNG-APP = "SomeApp"）がある場合、構成$インジェクターとして使用されます。
6。$インジェクターは、$ compileサービス（サービス）と$ rotscopeの作成に使用されます。
7. $コンパイルサービスは、「コンパイル」（ある種のトラバーサルのようなもの、次に少し神秘的なことをする）domとして使用され、それを対応する$ rotscopeに接続します。
8。ng-initこの指令は、対応する範囲に名前属性を作成し、「子猫」の値を割り当てます。
9。「{{{name}}}」の値を式に挿入し、最後に「hello kitty！」を表示します。
<！doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty！</title> <style type = "text/css"> .ng-cloak {display：none：none; } </style> </head> <body> <div ng-init = "name = 'kitty'"> hello {{name}}！</div> <scrip src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> </html>今夜誰かと何かを話し合ったので、進歩は遅かった。 。 。それがまた文です。 。 。今は夜遅くです。 。 。 Angular、広告の後に会いましょう！
===============================================================================
広告が終了しました。 。 。続く
3。ランタイム
このチャートと次の例は、ブラウザイベントループを介してAngularがどのように相互作用するかを説明します（すべての時間処理機能、およびタイマーによって実行される関数はキュー構造に配置され、無限のループを使用してキューから機能を継続的に抽出して実行します。これはイベントループです。 http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop）。
1.ブラウザイベントループは、イベントが到着するのを待ちます。イベントは、ユーザーインタラクション（DOMイベント）、タイマーイベント（SettimeOut）、ネットワークイベント（サーバー応答、XHRなど）からのものです。
2。イベントコールバック関数が実行され始めます。ここでは、JavaScriptコンテキスト（コンテキスト）を入力します。このコールバック関数は、DOM構造を変更できます。
3.コールバック関数が実行されると、ブラウザはJavaScriptコンテキストを終了し、DOMの変更に応じてビューを再描画します。
Angularは、独自のイベント処理ループを作成することにより、一般的なJavaScriptフローを修飾します。これにより、JavaScriptが従来の実行コンテキストと角張った実行コンテキストに分割されます。 Angular実行コンテキストで実行される操作には、角度データ結合、例外処理、プロパティウォッチング、その他の能力があります。 JavaScriptで$ apply（）を使用して、Angular実行コンテキストを入力できます。ただし、ほとんどの場所（Angular）（コントローラー、サービスなど）では、イベントを処理する指令が$を適用することを忘れないでください。 $ applyが手動で呼び出されるシナリオは、通常、カスタムイベントハンドラーを実装したり、サードパーティライブラリからのコールバックをハンドルしたりする場合です。
1. scopeを呼び出して角度実行コンテキストを入力します。刺激fnは、関数（引数としての範囲を含む）または角度実行コンテキストで実行したい角度の法的表現です。
2。Angularは、通常、アプリケーション状態を変更します。
3. Angularは$ DIGESTループに入ります。このループは、$ evalasyncキューと$ watchリストを処理する2つの小さなループで構成されています。モデルが安定する前に$ダイジェストループがイテレーションを維持します。つまり、$ evalasyncキューが空で、$ watchリストで変更は検出されません。
4。$ evalasyncキューは、現在のスタックフレームを現在のスタックフレームからジャンプする必要があることを整理する手段として使用されます（スタックフレームは、スタック内の現在実行されているパラメーターに割り当てられた領域（またはスペース）を指します。通過したパラメーター、返信アドレス（これは、関数が使用されています。スタックに保存されている変数）は、すべてスタックフレームにあります。これは通常、Settimeout（0）を使用して達成されます。しかし、メソッドのsetimeout（0）は遅くなるか、各イベントが処理された後にブラウザがビューを描画すると、ビューが点滅します（Angularはこの問題を解決しますか？それを解決する方法はありますか？）。
5。$ウォッチリストは、最新の反復で変更される可能性のある表現のコレクションです。 （モデル）が変更された場合、$ watch関数が呼び出され、特定のDOMを再割り当てするという目標を達成します。
6. Angular $ Digestループが完了すると（前の3つで言及された状況）、AngularおよびJavaScriptのコンテキストを離れた後、ブラウザは変更に応じてDOMを塗り直します。
以下は、ユーザーがテキストボックスにテキストを入力したときに「ハローキティ」（-_-！）の例がデータバインディング効果を実装する方法を説明します。
1。コンピレーションフェーズ：
a）ng-modelおよびinputディレクティブキーダウンイベントリスナーは、<input>で指定されています。
b）{{name}}プレースホルダー（補間、翻訳方法がわからない）（式）$ watchを設定して、名前が変更されたときに応答します。
2。ランタイムフェーズ：
a）INUTコントロールの「X」ボタンを押して、ブラウザにキーダウンイベントをトリガーします。
b）入力指令は、テキストボックス値の変更をキャプチャし、$ apply（ "name = 'x';"）を呼び出し、Angular実行コンテキストでAppliedモデルを更新します。
c）Angluarは「name = 'x';」を適用しますモデルに。 （モデルが変更されました）
d）$ダイジェストループの開始
e）$ watchリストは、名前の値が変更されたことを検出し、{{name}}式を再度解析し、DOMを更新します。
f）Angular Exit（Angular）実行コンテキスト、次にキーダウンイベントとJavaScript実行コンテキストを終了します。
g）ブラウザはビューを再描画し、文字を更新します。
<！doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty！</title> <style type = "text/css"> .ng-cloak {display：none：none; } </style> </head> <body> <入力ng-model = "name"/> <p> hello {{name}}！</p> <scrip src = "../ angular-1.0.1.js" type = "text/javascript"> </script> </body> </html>4。スコープ
範囲は、モデルの変更を検出し、式の実行コンテキストとして機能する責任があります。スコープは、DOM構造と同様の階層にネストされています（前に学んだように、部門はコントローラーに関連している可能性があります）。 （詳細については、個々のディレクティブドキュメントを確認して、どのディレクティブが新しいスコープを作成するかを確認してください）
次の例は、式「名前」の値が依存する範囲（属する範囲）に基づいて決定され、値検索の方法も含まれていることを示しています（JSスコープチェーンと同様に、お父さんを探してください）。
<！doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> scope </title> <style type = "text/css"> .ng-cloak {display：none; none; } </style> </head> <body> <div ng-controller = "controllera"> hello {{name}}！ <div ng-controller = "controllerc"> hello {{name}}！; <div ng-controller = "controllerd"> hello {{name}}！; </div> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script = "text/javascript"> function controllera（$ scope）{$ scope.name = 'kity'; } function controllerb（$ scope）{$ scope.name = 'lclao'; } function controllerc（$ scope）{$ scope.name = 'jeffrey'; } function controllerd（$ scope）{} </script> </body> </html>5。コントローラー
<！doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> controller </title> <style type = "text/css"> .ng-cloak {display：none; none; } </style> </head> <body> <div ng-controller = "controllera"> hello {{name}}！ <button ng-click = "doit（）"> doit !! </button> </div> <スクリプトsrc = "../ angular-1.0.1.js" type = "> javascript"> </script> <script> <script> "text/javascript"> function controllera（$ scope）{$ scope.name = 'kitty'; $ scope.doit = function（）{$ scope.name = "handome"; }; } </script> </body> </html>コントローラーは、ビューの背後にあるコード（-_-！）です。その責任は、モデルを構築し、コールバック関数を介してビューに押し込むことです。ビューは、現在のテンプレート（HTML）マップ（少し翻訳されています...）です。スコープは、モデルをビューに向けてコントローラーに送信するリンクです。
次のため、コントローラーをビューから分離することが重要です。
1.ControllerはJavaScriptで記述されています。 JavaScriptが不可欠です。重要なコマンドは、アプリケーションの動作を説明する良い方法です。コントローラーには、表示情報（論理）（DOM参照またはHTMLフラグメント）を含めるべきではありません
2.ViewテンプレートはHTMLで記述されています。 HTMLは宣言的です。宣言（HTML）は、UIを説明する良い方法です。ビューには動作を含めるべきではありません。
3.コントローラーはどのビューに対応する必要があるかを知らないため、コントローラーは（間接的に）複数のビューを使用できます。これは、再スキン（スキンを置き換える？）、他のデバイス固有のビュー（携帯電話やデスクトップなど）、およびコードの測定可能性にとって重要です。
6。モデル
モデルはデータオブジェクトとして理解できます。ビューを作成するために、テンプレートとの組み合わせとして使用されます。モデルをビューに記述するには、モデルをスコープで参照する必要があります。他の多くのフレームワークとは異なり、Angularにはモデルに制限や要件がありません。追加のクラスを追加する必要はなく、特別な特権的な方法を介してモデルにアクセスしたり変更する必要もありません。モデルのデータ型は、プリミティブタイプ（文字列、数値...）、キー値オブジェクト（{a：1、b：2}）、またはfunction（function（）{…}）にすることができます。簡単に言えば、Angularモデルは通常のJavaScriptオブジェクトである必要があります。
7。表示
ビューはユーザーが見ることができるものです。ビューはテンプレートで生まれました。それはモデルと組み合わされ、最終的にそれをブラウザDOMとしてレンダリングします。 Angularは、他の多くのテンプレートシステムのビューを提示するために非常に異なる方法を取ります。
その他のテンプレートエンジン：特別なタグを備えたHTML文字列を作成することにより、多くのテンプレートエンジンが実装されています。通常、これらのテンプレートタグはHTML構文を破壊します。つまり、コードは一般的なHTMLエディターを介して編集できません（これは...）。テンプレート文字列はテンプレートエンジンに渡され、データとマージされます。最後にHTML文字列を生成します。これらの文字列は通常、.innerhtmlのDOMに書き込まれ、ブラウザにテンプレートのコンテンツをレンダリングするように促します。このプロセスは、データが変更されたときに何度も繰り返す必要があります。テンプレートの粒度は、DOMアップデートの粒度と一致しています。この穀物の鍵は、テンプレートシステムが文字列を処理することです。
Angular：Angularテンプレート間の違いは、文字列ベースではなくDOMベースであることです。テンプレートはまだHTMLにいくつかの文字列を書き込む必要がありますが、それでもHTMLです（内部にテンプレートを埋め込むことはありません）。ブラウザはHTMLをDOMに変換し、DOMがコンパイラ（Angularのテンプレートエンジン）の入力になります。コンパイラは、モデル内のディレクティブを探し、時計を順番に設定します。その結果、常に更新されてきたビューがあり、モデルとテンプレートを再スティッチする必要はありません。モデルは、視界の唯一の真実の源になります。
8。ディレクティブ
ディレクティブは、動作（例えば、前の記事の例「HIDEN SEKE」など）またはDOM変換（DOMSのセットを含むカスタムタグ）であり、その名前を属性、タグ名、およびクラス名に配置すると、指令をトリガーできます。ディレクティブを使用すると、HTMLタグを宣言的な方法で拡張できます。
次の例にはまだいくつかの質問があります。それが$ render triggers @_ @
<！doctype html> <html lang = "zh-cn" ng-app = "mydirective"> <head> <meta charset = "utf-8"> <title> directive </title> <style type = "text/css"> .ng-cloak {display：none：none; } </style> </head> <body ng-controller = "myctrl"> <div ng-model = "content" contentedable = "true"> my little dada </div> <pre> modelvalue = {{content}} </pre> <button ng-click = "reset（）" type = "text/javascript"> </script> <script type = "text/javascript"> angular.module（ "myDirective"、[]）.directive（ "contentedable"、function（）{require： 'ngmodel'、link：function（scope、element、ngmodel）{fents setval（）{ Ngmodel。$ setviewvalue（） }}）.controller（ "myctrl"、function（$ scope）{$ scope.reset = function（）{$ scope.content = "my little dada";};}）; </script> </body> </html> </html>9。フィルター
フィルターは、データ変換（フォーマット）に役割を果たします。通常、それらは地域に関連しており、異なる地域には異なる出力形式がある場合があります。彼らは同様の構文でUNIXフィルターのスピリットに従っています：| （パイプ）
<！doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title>フィルター</title> <style type = "text/css"> .ng-cloak {display：none; none; } </style> </head> <body> <div ng -init = "list = ['baidu b'、 'sogou s'、 '360'、 '3sb']"> numberフォーマット：1233211234567-> {{12332112334567 |番号}} ng-model = "myfiltertext" type = "text"/> <br/> {{list | filter：myfiltertext | json}} <br/> </div> <script src = "../ angular-1.1.js" type = "text/javascript"> </</body> </html>10。モジュールとインジェクター
インジェクターはサービスロケーターです。各Angularアプリケーションには、個別のインジェクターがあります。インジェクターは、名前でオブジェクトインスタンスを見つける方法を提供します。インジェクターはすべてのオブジェクトインスタンスを内部キャッシュに保持するため、同じ名前が繰り返し呼び出されると、同じオブジェクトインスタンスが返されます。オブジェクトが存在しない場合、インスタンスファクトリーに新しいインスタンスを作成するように要求します。
モジュールは、「プロバイダー」と呼ばれるインジェクターのインスタンスファクトリを構成する方法です。
//モジュールの作成var mymodule = angular.module（ 'mymodule'、[]） //インジェクターを作成し、 'myModule' var $ injector = angular.injector（ 'mymodule'）から構成します。 // var servicea = $ injector.get（ 'servicea'）でインジェクターからオブジェクトを取得します。 //インスタンスのために常に真実cache $ injector.get（ 'servicea'）=== $ injector.get（ 'servicea'）; // 真実
しかし、インジェクターの本当のクールなXは、メソッドを呼び出して「インスタンス化」タイプに使用できることです。この素晴らしい機能は、メソッドとタイプがそれらを検索するのではなく、依存するリソースを要求できることです。
//このような関数を書きます。 function dosomething（servicea、serviceb）{//ここで何かをします。 } // Angularは、アプリケーションのインジェクターを提供しますvar $ injector = ...; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////関数を呼び出します。 //上記は伝統的な古い方法です〜以下は、角度がそれ自身の牛について話す方法ですx //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////////////////依存関係を取得するクールな方法。 // $ injectorは、関数に引数を自動的に$ injector.invoke（dosomething）; //これは、フレームワークが機能を呼び出す方法です書く必要があるのは私たちの関数だけであり、この方法が関数の引数で依存するリソースをリストできることに注意してください！ Angular呼び出しが機能すると、「呼び出し」メソッドを使用して、関数Agrumentsを自動的に埋めます。
以下の例のコンストラクターに依存関係がどのようにリストされているかに注意してください。 NG-Controllerがコントローラーにインスタンス化すると、依存関係リソースが自動的に提供されます。ロード依存関係リソースへのインジェクターの参照を作成、検索、または作成する必要はありません。
<！doctype html> <html lang = "zh-cn" ng-app = "timeexample"> <head> <head> <meta charset = "utf-8"> <title> injector> injector </title> <style type = "text/css"> .ng-cloak {display：none：none; } </style> </head> <body> <div ng-controller = "clockctrl">現在の時刻は：{{time.now}} </div> <script src = "../ angular-1.0.1.js"タイプ= "テキスト/javascript"> </script = "text/javascript"> moduoul " []）。ファクトリー（ "myclock"、function（$ timeout）{var time = {};（function tick（）{time.now = new date（）。toString（）; $ timeout（tick、1000）;}）（）; return time;}）; /** * * @param $ scope * @param myclock myclockがここに自動的に挿入されます！ ！ * @constructor */ function clockctrl（$ scope、myclock）{$ scope.time = myclock; } </script> </body> </html>11。角度名空間
名前の競合を防ぐために、Angularはプレフィックス$をオブジェクトの名前に追加します。競合を避けるために、コードに$プレフィックスを使用しないでください。 （-_- !!）
上記は、AngularJSの概念に関する情報です。今後も関連する記事を追加し続けます。このサイトへのご支援ありがとうございます！