angleJSの依存性注入メカニズム
の導入
DIは強力なangularJSメカニズムであり、サードパーティライブラリから定義されたオブジェクトをAngularアプリケーションに挿入するのに役立ちます。これは、コードの方法に基づいて、angularJSモジュールをインスタンス化するときに2番目のパラメーターとして配列内の要素として渡されます。理解してください、それはライブラリオブジェクトを参照するのに役立ちますが、直接参照ステートメントを使用せずに、関数をコーディングせずに実行時にモジュールに依存させる手法です。
ウィキペディアで依存性注入の詳細を参照してください：https： //en.wikipedia.org/wiki/Dependency_injection
プログラマーは、アプリケーションを多くの異なるコンポーネント（コンポーネント）に分割し、あるコンポーネントから別のコンポーネントに挿入できます。angularJSアプリケーションのモジュール化メカニズムにより、コンポーネントの構成、再利用、更新、およびテストが簡単になります。組み込みのインジェクター（デフォルトで注入されたオブジェクト）は、コンポーネント（コンポーネント）の作成、依存関係の分類、必要に応じて他のコンポーネントへの提供を担当します。
前述のように、インジェクションメカニズムにより、コードがより再利用可能になります。たとえば、アプリケーションのさまざまな状況で再利用する必要がある機能を作成する場合は、ビジネス共通サービスを定義し、依存関係としてインジェクションして再利用することを検討してください。 。
注入メカニズムを介してangularJSがアプリケーションに注入するコンポーネントとオブジェクトの一部：
- 価値
- プロバイダー
- 絶え間ない
- 工場
- サービス
Mục lục
価値
これはモジュールのメソッドであり、プログラマーがオブジェクト（オブジェクト）、文字列（数値）、または数値（数値）を定義し、構成フェーズ（ブートストラップフェーズ）中にそれらをコントローラーに注入するのに役立ちます。サーバー、コントローラー、ファセットに値を挿入するためによく使用されます。
以下の例を参照してください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.value("number",10); myApp.value("string","Hello"); myApp.value("object",{name:"Nguyen Van A",age:20}); myApp.value("array",["Nguyen Van A","Nguyen Van B","Nguyen Van C"]); myApp.controller('myController', function($scope,number,string,object,array){ $scope.number = number; $scope.string = string; $scope.object = object; $scope.array = array; console.log($scope.number); console.log($scope.string); console.log($scope.object); console.log($scope.array); }); </script> </html>プログラム実行時の結果：
プロバイダー
AngularJsはprovider（）メソッドを使用して、構成フェーズ（アプリケーションの起動と構成の開始時）中にサービスまたはファクトリを作成します。プロバイダーは、$ get（）および戻り値、ファクトリまたはサービス（少し紛らわしいですが、例を見下ろしてください。これは、注入可能なサービスを作成する方法をangualrJSに指示します（ビジネスは注入可能であるため、プロバイダーがサービスを定義し、サービスを通じて作成されます）。組み込みは$provideです。
以下の例を検討してください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Provide</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <button ng-click="DisplayProvider()" ng-disabled="flag">Display</button> <div ng-bind="ProviderOutput"></div> </div> </body> <script> var app = angular.module('myApp', []); app.provider("myProvider", function () { this.$get = function () { return { Display: function () { return "Display from services"; } }; }; }); app.controller('myCtrl', function ($scope, myProvider) { $scope.ProviderOutput = "Provider outoput"; $scope.DisplayProvider = function () { $scope.flag = true; $scope.ProviderOutput = myProvider.Display(); } }); </script> </html>これは、プロバイダーを使用してコントローラーに注入可能なサービスを作成する方法の最も基本的な例です。ご覧のとおり、myProviderのDisplayメソッドは既に呼び出されており、myProviderオブジェクトは、他のオブジェクトと同様に、コントローラーに挿入されて使用されます。注射可能なオブジェクト。
さらに、app.config（）、app.run（）メソッド（アプリケーション構成の開始時またはアプリケーションの実行開始時に実行されるメソッド）を介して関数を定義することもでき、関数はインジェクションメカニズムを介してインジェクトすることもできます。
絶え間ない
angleJSでは、config（）メソッドはサービスのインスタンスまたはvalue（）メソッドで定義された値をパラメーターとして渡すことができないため、値またはエンティティを挿入することはできません。ただし、構成中にサービスプロバイダーとして定数を挿入することは可能です。これは、定数が構成中に値を渡すのに役立ち、アプリケーションの実行中（実行時）にも使用できることを意味します。）
例を通してそれを証明してください：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.value("testnumber",100); myApp.config(function($provide,testnumber){ console.log(testnumber); }); myApp.controller('myController', function($scope,testnumber){ }); </script> </html>実行後、ブラウザはエラーを出します：
定数の場合、config（）またはrun（）に値を挿入したり、値を変更したりすることもできます。ただし、構成で定数の値が変更されていても、初期化時にコントローラーレイヤーと変数のデータは値によって識別されるため、あまり意味がありません（定数は定数であり、値は変更されません）。プログラム全体の値）以下の例を参照してください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dependency injection</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> {{testnumber}} </div> </body> <script> var myApp = angular.module('myApp', []); myApp.constant("testnumber",100); myApp.config(function($provide,testnumber){ console.log($provide); testnumber = 1000; console.log(testnumber); }); myApp.controller('myController', function($scope,testnumber){ $scope.testnumber = testnumber; }); </script> </html> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
