最近、私は権威あるAngularjsガイドを読んでいました。さまざまな理由により(主にお金がないので嫌いだから、電子バージョンをオンラインでダウンロードすることを選択しました(お金がかからないので...)。フォントは非常に明確で、全体的な効果はかなり良いです。しかし、左上隅に合計ページ番号が見られます。ページ番号を学びたくないが、それは私のガールフレンドとの口論よりも複雑ですか?
幸いなことに、電子書籍を読む前は、私は少し基本的でした。双方向のデータバインディングからサービスへのビデオを見ている間、私は少し学びましたが、それから指導システムまで、多かれ少なかれ連絡がありました。さらに、Web特別なコース選択の割り当てでは、フロントエンドのAngularJSを介して、バックエンドでNodeJSとバックエンドのMongooseを介してシンプルな学生クラス管理システムが構築されました。お金がないので、githubにしか置くことができません。 GitHubアドレス:学生管理システム、フォークへようこそ、以下のトピックにアクセスしましょう...
=============================================================================================================
通常、オブジェクトが依存関係を制御するには3つの方法があります。
(1)内部的に依存関係を作成する。
(2)グローバル変数による参照。
(3)必要に応じてパラメーターを通過します。
依存関係注射は3番目の方法で達成されます。他の2つの方法は、グローバルな範囲の汚染、分離を非常に困難にするなど、さまざまな問題をもたらします。依存関係注入は、ハードコーディングされた依存関係を除去する設計パターンであり、依存関係を実行時に変更または削除することさえできます。
実行時に依存関係を変更する機能は、生産環境で実際のオブジェクトの代わりにモックされたオブジェクトを使用できる孤立した環境を作成できるため、テストに最適です。
機能的な観点から、依存関係の噴射は、依存関係を事前に自動的に見つけ、注入ターゲットの依存リソースに通知し、ターゲットが必要なときにリソースをすぐに注入できるようにします。
他のオブジェクトやライブラリに依存するコンポーネントを作成する場合、コンポーネント間の依存関係を記述する必要があります。ランタイム中に、インジェクターは依存関係のインスタンスを作成し、依存する消費者に渡す責任があります。
// Angular Documentation Function SomeClass(Greeter){this.Greeter = Greeter;} someclass.prototype.greetname = function(name){this.greeter.greet(name);}; //サンプルコードがグローバル範囲でコントローラーを作成することに注意してください。SomeClassは、実行時に内部挨拶者にアクセスできますが、挨拶者への参照を取得する方法は気にしません。 Greeterインスタンスへの参照を取得するために、SomeClassの作成者は、その依存関係を構築し、それらを渡す責任があります。
上記の理由により、AngularJSは$ Injetor(インジェクターサービス)を使用して、依存関係のクエリとインスタンス化を管理します。実際、$ Injetorは、アプリケーションのモジュール、命令、コントローラーを含むAngularJSのすべてのコンポーネントをインスタンス化する責任があります。
実行時に、$ Injetorは、必要なすべての依存関係を起動して渡すときに任意のモジュールをインスタンス化する責任があります。
たとえば、次のコード。これは、モジュールとコントローラーを宣言する単純なアプリケーションです。
angular.module( 'myApp'、[])。factory( 'greeter'、function(){return {greet:function(msg){alert(msg);}}}})。AngularJSがこのモジュールをインスタンス化すると、Greeterを探し、自然に参照を渡します。
<div ng-app = "myapp"> <div ng-controller = "mycontroller"> <button ng-click = "sayhello()"> hello </button> </div> </div>
内部的には、AngularJSの処理プロセスは次のとおりです。
//インジェクターを使用してアプリケーションをロードするvar injector = angular.injector(['ng'、 'myApp']); myController = $ controller( 'myController'、{$ scope:scope});上記のコードでは、挨拶を見つける方法を指定しませんが、$インジェクターが私たちのためにそれを見つけてロードする責任があるため、適切に機能します。
AngularJSは、アノテート関数を介したインスタンス時に、渡された関数からパラメーターリストを抽出します。次のコードをChromeの開発者ツールに入力して、この関数を表示します。
> injector.annotate(function($ q、greeter){})["$ q"、 "Greeter"]]AngularJSアプリケーションでは、$ Indjectorが機能しているかどうかにかかわらず。コントローラーを作成するとき、[]タグが使用されない場合、または明示的な宣言が行われた場合、$インジェクターはパラメーター名で依存関係を推測しようとします。
推測された注入声明
明示的な宣言がない場合、Angularjsは、パラメーター名が依存関係の名前であると想定しています。したがって、関数オブジェクトのtoString()メソッドを内部的に呼び出し、関数パラメーターリストを分析および抽出し、$インジェクターを介してこれらのパラメーターをオブジェクトインスタンスに挿入します。注入プロセスは次のとおりです。
Injector.Invoke(function($ http、greeter){});AngularJSには解析に未加工されていないパラメーターリストが必要であるため、このプロセスは非圧縮および難読化コードにのみ適用できることに注意してください。 AngularJSが正しい順序でプロパティを注入するのに役立つため、パラメーター名に基づいて推測するプロセスでは、パラメーターの順序はほとんど意味がありません。
明示的に宣言を注入します
AngularJSは、関数が呼び出されたときに使用する必要がある依存関係を明確に定義するための明示的な方法を提供します。この方法で依存関係を宣言することは、ソースコードが圧縮され、パラメーター名が変更された場合でも、適切に機能する可能性があります。 $ Injectプロパティを使用して、宣言の明示的な注入の機能を実装できます。関数オブジェクトの$ Injectプロパティは配列、配列要素のタイプは文字列であり、その値は注入する必要があるサービスの名前です。
これがサンプルコードです:
var acontrollerfactory = function acontroller($ scope、greeter){console.log( "loaded controller"、greeter); // ... controller}; acontrollerfactory。$ inject = ['$ scope'、 'greeter']; // Greeter Service Console.log( "Greeter Service");} //アプリケーションコントローラーAngular.Module( 'myApp'、[])。コントローラー( 'myController'、acontrollerfactory).Factory( 'Greeter'、GreeterService); Injector.get( '$ controller')、rootscope = injector.get( '$ rootscope')、newscope = rootscope。$ new(); //コールコントローラー( 'mycontroller'、{$ scope:newscope});この宣言方法では、$入品アレイ要素の順序は、注入パラメーターの順序に1つずつ対応する必要があるため、パラメーターの順序が非常に重要です。この宣言方法は、宣言の関連情報がすでに関数自体に拘束されているため、圧縮コードで実行できます。
ライン内注射ステートメント
AngularJSが提供する宣言を注入する最後の方法は、いつでも使用できるインライン注入宣言です。この方法は実際には構文糖であり、$ injectプロパティを介して宣言を注入するために上記の原則とまったく同じですが、関数が定義されたときにライン内からパラメーターを渡すことができます。さらに、定義プロセス中に一時的な変数の使用を回避します。
AngularJSオブジェクトを定義するとき、インライン宣言により、関数の代わりに一連のパラメーターを直接渡すことができます。配列の要素は文字列であり、オブジェクトに注入できる依存関係の名前を表します。最後のパラメーターは、依存関係噴射のオブジェクトオブジェクト自体です。
例は次のとおりです。
angular.module( 'myApp')。コントローラー( 'myController'、['$ scope'、 'greeter'、function($ scope、greeter){}]);処理する必要があるのは文字列のリストであるため、インライン注入宣言も圧縮コードで正常に実行される可能性があります。通常、アレイを宣言する[]括弧と[]シンボルによって使用されます。
上記のAngularJS依存関係の注入は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。