AngularJS依存性注入
依存関係の注入とは何ですか
Wikiの説明は、依存関係注入(DI)は、1つ以上の依存関係(またはサービス)が別のオブジェクト(またはクライアント)に注入(または参照によって渡される)ソフトウェア設計パターンであり、クライアントの状態の一部になります。
このパターンは、クライアント依存性の動作の作成を分離します。これにより、プログラミングは緩やかに結合され、依存関係の逆転と単一の責任の原則に従います。サービスロケーターのパターンとは対照的に、クライアントがクライアントがシステムを使用して依存関係を見つける方法を理解することができます
一言で言えば、何もすることがないなら、私のところに来ないでください。あなたが何かすることがあればあなたのところに行きます。
AngularJSは、良好な依存噴射メカニズムを提供します。次の5つのコアコンポーネントは、依存関係噴射として使用されます。
価値
工場
サービス
プロバイダー
絶え間ない
価値
値は、値をコントローラーに渡す単純なJavaScriptオブジェクト(構成フェーズ)です。
var mainapp = angular.module( "mainapp"、[]); //値オブジェクト "defaultinput"を作成し、data mainapp.value( "defaultinput"、5); calcservice.square($ scope.number);
工場
工場は値を返す関数です。サービスとコントローラーが必要なときに作成されます。
通常、工場関数を使用して、値を計算または返すことができます。
//モジュールvar mainapp = angular.module( "mainapp"、[]); // 2つのnumbersmainapp.factory( 'mathservice'、function(){var factory.multiply = function(a、b){return a * b} factor;}; //サービスMainApp.Service( 'calcservice'、function(mathservice){this.square = function(a){return mathservice.multiply(a、a);}}); ...プロバイダー
AngularJSでは、サービス、工場などがプロバイダー(構成段階)を介して作成されます。
FactoryメソッドGET()がプロバイダーに提供されます。これは、値/サービス/工場を返すために使用されます。
//モジュールの定義var mainapp = angular.module( "mainapp"、[]); ... //プロバイダーを使用してサービスを作成する2つの数字mainapp.config($ sultion.provider( 'mathservice'、function(){this = get = function(){var factory = apectory = aftory = multiply = multiply = multiply = multiply = multiply = multiply = ectory( * b;絶え間ない
定数(定数)は、構成フェーズ中に数値を渡すために使用されます。この定数は、構成フェーズでは使用できないことに注意してください。
MainApp.Constant( "configparam"、 "constant value");
例
次の例は、上記のいくつかの依存関係注入メカニズムの実証を提供します。
<html> <head> <メタcharset = "utf-8"> <title> angularjs依存関係</title> </head> <body> <h2> angularjs simpleアプリケーション</h2> <div-app = "mainapp" ng-controller = "calccontroller"> <punt "ng-model =" ng-click = "square()"> x <sup> 2 </sup> </button> <p> result:{{result}} </p> </div> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.min.js Angular.module( "mainApp"、[]); mainapp.config(function($ witrent){$ sultion.provider( 'mathservice'、function(){this。$ get = function(){var factory = {}; factory.multiply = function(a、b){return a * b;} return factory;};};}); }); mainApp.Value( "DefaultInput"、5); MainApp.Factory( 'MathService'、function(){var factory = {}; factory.multiply = function(a、b){return a * b;} return factory;}); mainApp.Service( 'calcservice'、function(mathservice){this.square = function(a){return mathservice.multiply(a、a);}}); MainApp.Controller( 'Calccontroller'、function($ scope、calcservice、defaultinput){$ scope.number = defaultinput; $ scope.result = calcservice.square($ scope.number); $ scope.square = function(){$ scope.number($ scope.number); </script> </body> </html>実行結果:
上記は、AngularJS依存関係を注入するためのデータのソートです。後で追加し続けます。 Angularjsを開発する友人を助けることができることを願っています。