AngularJS依存性注入コンポーネント
⚡ スマートサマリー
AngularJS の依存性注入では、コンポーネントが依存するオブジェクトをコンポーネント自身で構築するのではなく、コンポーネントに渡します。そのため、コントローラーは実行時にフレームワークのインジェクターから $http などのサービスを受け取ります。
AngularJS の依存性注入とは何ですか?
依存性注入 AngularJS の は、依存関係を解決するための制御の反転を実装するソフトウェア設計パターンです。 コンポーネントが依存関係をどのように保持するかを決定します。 これは、コンポーネントを定義するとき、またはモジュールの実行ブロックと構成ブロックを提供するときに使用できます。 これにより、コンポーネントを再利用可能、テスト可能、保守可能にすることができます。
制御の反転: これは、オブジェクトがその作業を行うために依存する他のオブジェクトを作成しないことを意味します。 代わりに、これらのオブジェクトを外部ソースから取得します。 これは、あるオブジェクトが別のオブジェクトに依存する場合に、AngularJS 依存関係の挿入の基礎を形成します。 プライマリ オブジェクトは、依存オブジェクトを作成してそのメソッドを使用する責任を負いません。 代わりに、外部ソース (AngularJS では AngularJS フレームワーク自体) が依存オブジェクトを作成し、それをソース オブジェクトに与えてさらに使用できるようにします。
⚠️ バージョンに関する注記: AngularJSのサポートは2022年1月に終了しました。セキュリティパッチなし。最新のAngularは@Injectableプロバイダーを介して注入し、 注入()以下のコードは履歴情報として保持されます。
そこで、まず依存関係とは何かを理解しましょう。
上の図は、データベース プログラミングにおける日常的な儀式の単純な AngularJS 依存関係注入の例を示しています。
- 「モデル」ボックスには、通常データベースとやり取りするために作成される「モデル クラス」が表示されます。つまり、データベースは「モデル クラス」が機能するための依存関係になります。
- 依存関係注入により、データベースからすべての情報を取得し、モデル クラスに取り込むサービスを作成します。
このチュートリアルの残りの部分では、依存性注入と、それがどのように実現されるかについて詳しく見ていきます。 AngularJS.
AngularJSで依存関係として注入できるコンポーネントはどれですか?
AngularJSでは、依存関係は「注入可能なファクトリメソッド」または「コンストラクタ関数」を使用して注入されます。
これらのコンポーネントには、「サービス」コンポーネントと「値」コンポーネントを依存関係として挿入できます。 これについては、$http サービスに関する以前のトピックで説明しました。
AngularJS モジュール 5つのレシピを通して、注入可能なオブジェクトを登録します。
| 抽出水のレシピ | 記録するもの |
|---|---|
| 値 | 設定ブロックからは見えない準備完了オブジェクト |
| 工場 | 戻り値が注入される関数 |
| サービス | new で一度インスタンス化されたコンストラクタ |
| プロバイダー | $getを公開する設定可能なレシピ |
| 定数 | 設定ブロックで読み取り可能な固定値 |
$http サービスを AngularJS 内で使用して、 MySQL またはMS SQL サーバーデータベース経由 PHP ウェブアプリケーション。
$http サービスは通常、コントローラー内から次の方法で定義されます。
sampleApp.controller ('AngularJSController', function ($scope, $http)
上記のように $http サービスがコントローラーで定義されているとします。 これは、コントローラーが $http サービスに依存していることを意味します。
したがって、上記のコードが実行されると、AngularJS は次の手順を実行します。
- 「$http サービス」がインスタンス化されているかどうかを確認します。 「コントローラー」は「$http サービス」に依存しているため、このサービスのオブジェクトをコントローラーで使用できるようにする必要があります。
- $http サービスがインスタンス化されていないことが AngularJS によって検出された場合、AngularJS は「factory」関数を使用して $http オブジェクトを構築します。
- AngularJS内のインジェクターは、その後の処理のために、$httpサービスのインスタンスをコントローラーに提供します。
注釈フォーム: 暗黙的な注釈 パラメータ名を読み取るため、ミニファイによって壊れます。インライン配列表記と$injectはどちらもミニファイ後も残ります。ng-appのng-strict-diは暗黙の注釈を拒否します。
依存関係がコントローラーに挿入されたので、さらに処理するために $http サービス内で必要な関数を呼び出すことができます。
依存関係の注入の例
この例では、AngularJS で依存関係注入を使用する方法を学びます。
依存性注入は 2 つの方法で実装できます
- XNUMX つは「価値コンポーネント」によるものです。
- もうXNUMXつは「サービス」によるものです
両方の方法の実装を詳しく見てみましょう。
1) 価値要素
このコンセプトは、シンプルな Javaスクリプト オブジェクトを取得し、それをコントローラーに渡してさらに処理させる。
これは以下の XNUMX つの手順を使用して実装されます
ステップ1) 作る Javavalueコンポーネントを使用してスクリプトオブジェクトを作成し、それをメインのAngularJSモジュールにアタッチします。
値コンポーネントは 2 つのパラメータを取ります。1 つはキー、もう 1 つは値です。 Java作成されたスクリプトオブジェクト。
ステップ2) アクセス Javaスクリプトオブジェクトから AngularJSコントローラー
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">
<div ng-controller="AngularJSController">
<h3> Guru99 Global Event</h3>
{{ID}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.value("TutorialID", 5);
sampleApp.controller('AngularJSController', function($scope,TutorialID) {
$scope.ID =TutorialID;
});
</script>
</body>
</html>
上記のコードは、以下の手順を実行します。
-
sampleApp.value("TutorialID", 5);AngularJSモジュールのvalue関数を使用して、「TutorialID」というキーと値のペアを作成し、その値を「5」としています。
-
sampleApp.controller('AngularJSController', function ($scope,TutorialID)
これで、TutorialID 変数が関数パラメーターとしてコントローラーにアクセスできるようになります。
-
$scope.ID =TutorialID;
TutorialID の値である 5 は、現在、ID と呼ばれる別の変数に割り当てられています。 $スコープ オブジェクト。これは、値5をコントローラーからビューに渡すために行われます。
-
{{ID}}ID パラメータはビューに式として表示されます。したがって、ページには「5」の出力が表示されます。
上記のコードを実行すると、出力は次のように表示されます
2)サービス
サービスはシングルトンとして定義される Javaコントローラーで公開および挿入する一連の関数で構成されるスクリプト オブジェクト。
例えば、「$http」はAngularJSのサービスであり、コントローラーに注入すると必要な機能を提供します。
(get()、query()、save()、remove()、delete())。
これらの関数は、それに応じてコントローラーから呼び出すことができます。
独自のサービスを作成する方法の簡単な例を見てみましょう。2 つの数値を加算する簡単な加算サービスを作成します。
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>
<div ng-app = "mainApp" ng-controller = "DemoController">
<p>Result: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.service('AdditionService', function(){
this.ADDITION = function(a,b) {
return a+b;
}
});
mainApp.controller('DemoController', function($scope, AdditionService) {
$scope.result = AdditionService.ADDITION(5,6);
});
</script>
</body>
</html>
上記の例では、以下の手順が実行されます。
-
mainApp.service('AdditionService', function()
ここでは、メインのAngularJSモジュールのサービスパラメータを使用して、「AdditionService」という新しいサービスを作成します。
-
this.ADDITION = function(a,b)
ここでは、サービス内にADDITIONという新しい関数を作成しています。つまり、AngularJSがコントローラー内でAdditionServiceをインスタンス化すると、ADDITION関数にアクセスできるようになります。この関数定義では、この関数がaとbという2つのパラメータを受け取ることを指定しています。
-
return a+b;ここでは、パラメータを単純に加算して加算値を返すADDITION関数の本体を定義します。
-
mainApp.controller('DemoController', function($scope, AdditionService)
これは依存性注入を含む主要なステップです。コントローラーの定義で、「AdditionService」サービスを参照するようになりました。AngularJSはこれを見ると、「AdditionService」型のオブジェクトをインスタンス化します。
-
$scope.result = AdditionService.ADDITION(5,6);
ここでは、サービス内で定義されている関数「ADDITION」にアクセスし、それをコントローラーの$scopeオブジェクトに割り当てています。
これは、サービスを定義し、そのサービスの機能をコントローラー内に挿入する方法を示す簡単な例です。


