依存関係注射(DI)の利点はもう議論されず、Springフレームワークを使用した人はそれを知っています。前景JSフレームワークとして、AngularJSはDIのサポートも提供します。これは、JavaScript/JQueryにはない機能です。 Angularjsに関連するDIには、Angular.module()、angular.injector()、$ injector、および$供給が含まれます。 DIコンテナの場合、サービス登録、依存宣言、およびオブジェクトの取得の3つの要素が必要です。たとえば、春には、サービスの登録は、XML構成ファイルの<Bean>タグまたはAnnotation @Repository、@Service、@Controller、および@Componentによって実装されます。オブジェクトの取得は、applicationContext.getBean()によって実装できます。依存関係の宣言は、XMLファイルで構成することも、@Resourceおよびその他の注釈を使用してJavaコードで宣言することもできます。 Angularでは、モジュールと$の提供は、サービスの登録と同等です。インジェクターはオブジェクトを取得するために使用されます(Angularは依存関係の噴射を自動的に完了します)。 Angularで依存関係を宣言する3つの方法があります。以下は、これら3つの側面からのAngular DIの紹介です。
1。Angular.module()は、Angularでモジュールを作成、取得、および登録します
Angular.module()は、Angularモジュールを作成、登録、取得するためのグローバルな場所です。2つ以上の引数に合格すると、新しいモジュールが作成されます。 1つの引数のみに合格した場合、既存のモジュール(モジュールへの最初の引数として渡された名前)が取得されます。
//複数のパラメーターを渡すことは、新しいモジュールを意味します。空の配列は、モジュールが他のモジュールに依存しないことを意味しますvar createmodule = angular.module( "mymodule"、[]); //モジュール(モジュール名)のみがあります。 alert(createmodule == getModule);
この関数は、新しいモジュールを作成したり、既存のモジュールを取得したりできます。作成するか取得するか、パラメーターの数によって区別されます。
angular.module(name、[requess]、[configfn]);
名前:モジュールの名前を表す文字列タイプ。
必要:モジュールが依存する他のモジュールのリストを表す文字列の配列。他のモジュールに依存していない場合は、空の配列を使用してください。
configfn:このモジュールにいくつかの構成を作成するために使用されます。
これで、モジュールを作成および取得する方法がわかったので、モジュールとは正確には何ですか?公式開発者ガイドには1つの文があります。モジュールは、アプリコントローラー、サービス、フィルター、ディレクティブなどのさまざまな部分のコンテナと考えることができます。今はよくわかりません。これは、モジュールが、コントローラー、サービス、フィルター、指示などの子要素で構成された全体など、いくつかの機能のコレクションであることを意味します。今は説明できないので、最初に残します。
2。$供給とモジュールの関係
$供給サービスには、$インジェクターにコンポーネントを登録するための多くの方法があります。これらの機能の多くは、Angular.moduleにも露出しています。
前述のように、モジュールと提供は、サービスをインジェクターに登録するために使用されます。公式のAPIを確認すると、$ sults sultion sults()、constant()、value()、factory()、およびservice()を確認して、さまざまな性質のサービスを作成します。 Angular.moduleは、これらの5つのサービス登録方法も提供します。実際、2つの関数はまったく同じであり、DIコンテナとのサービスをインジェクターに登録するために使用されます。
公式APIの下での自動は、各$インジェクターに自動的に追加される$供給および$インジェクター、暗黙的なモジュールを含む。文字通り、各インジェクターにはこれら2つの暗黙的なサービスがあります。しかし、バージョン1.2.25では、インジェクターに$供給を取得する方法はないと感じています。なぜそうなのかわかりませんか?一般的に言えば、このサービスを表示する必要はありません。モジュールで提供されるAPIを使用するだけです。
var injector = angular.injector(); alert(injector.has( "$ detwere")); // falsealert(injector.has( "$ injector")); // true
3。angular.injector()
angular.injector()を使用してインジェクターを取得することもできます。しかし、それはモジュールに縛られていません。このアプローチは無意味であり、空のDIコンテナを作成するのと同等であり、サービスはありません。他の人はどのように使用できますか?正しい方法は、インジェクターを作成するときにロードする必要があるモジュールを指定することです。
// mymoduleモジュールを作成し、サービスを登録し、var mymodule = angular.module( 'mymodule'、[]); mymodule.service( 'myservice'、function(){this.my = 0;}); // hermoduleモジュールを作成し、サービスvar hermodule = angular.module(hermodule( 'hermodule(' 'hermodule)を登録します。 []); hermodule.service( 'herservice'、function(){this.her = 1;}); // service var injector = angular.injector(["mymodule"、 "hermodule"]); alert(injector.get( "myservice")。複数のモジュールがロードされている場合、複数のモジュールの下のサービスを返されたインジェクターを介して取得できます。この例では、MyMoudleのみがロードされている場合、取得したインジェクターはHermoudleの下のサービスにアクセスできません。ここで注意することが特に重要です:Angular.Injector()は複数回呼び出すことができ、たびに新しく作成されたインジェクターオブジェクトを返すことができます。
var injector1 = angular.injector(["mymodule"、 "hermodule"]); var injector2 = angular.injector(["mymodule"、 "hermodule"]); alert(injector1 == injector2); // fals
4. Angularの依存関係を宣言する3つの方法
Angularは、推論、注釈、およびインライン方法の依存関係を取得する3つの方法を提供します。
// myModuleモジュールを作成し、サービスを登録するvar mymodule = angular.module( 'mymodule'、[]); mymodule.service( 'myservice'、function(){this.my = 0;}); // get injectorvar injector = angular.injector(["mymodule"); // InferenceInjector.Invoke(function(myService){alert(myservice.my);}); // 2番目のannotationFunction explicit(servicea){alert(servicea.my);}; $ inject。 function(servicea){alert(servicea.my);}]);その中で、注釈とインラインの方法では、関数パラメーター名を必要としません。これは推奨されます。推論方法では、パラメーター名とサービス名が一貫していることが必要です。 JSコードが圧縮または難読化されている場合、関数に問題があり、この方法は推奨されません。
上記は、AngularJS依存関係によって注入された情報の編集です。今後も関連情報を追加し続けます。このウェブサイトへのご支援ありがとうございます!