AngularJS 依存関係の注入: どのコンポーネントが注入されたか

AngularJS の依存性注入とは何ですか?

依存性注入 AngularJS のは、依存関係を解決するための制御の反転を実装するソフトウェア設計パターンです。コンポーネントが依存関係をどのように保持するかを決定します。これは、コンポーネントを定義するとき、またはモジュールの実行ブロックと構成ブロックを提供するときに使用できます。これにより、コンポーネントを再利用可能、テスト可能、保守可能にすることができます。

制御の反転: これは、オブジェクトがその作業を行うために依存する他のオブジェクトを作成しないことを意味します。代わりに、これらのオブジェクトを外部ソースから取得します。これは、あるオブジェクトが別のオブジェクトに依存する場合に、AngularJS 依存関係の挿入の基礎を形成します。プライマリオブジェクトは、依存オブジェクトを作成してそのメソッドを使用する責任を負いません。代わりに、外部ソース (AngularJS では AngularJS フレームワーク自体) が依存オブジェクトを作成し、それをソースオブジェクトに与えてさらに使用できるようにします。

そこで、まず依存関係とは何かを理解しましょう。

上の図は、データベースプログラミングにおける日常的な儀式の単純な AngularJS 依存関係注入の例を示しています。

「モデル」ボックスには、通常データベースとやり取りするために作成される「モデルクラス」が表示されます。つまり、データベースは「モデルクラス」が機能するための依存関係になります。
依存関係注入により、データベースからすべての情報を取得し、モデルクラスに取り込むサービスを作成します。

このチュートリアルの残りの部分では、依存関係の挿入と、これが AngularJS でどのように実現されるかについて詳しく見ていきます。

AngularJS に依存関係として挿入できるコンポーネントはどれですか?

Angular.JS では、依存関係は「注入可能なファクトリメソッド」または「コンストラクター関数」を使用して注入されます。

これらのコンポーネントには、「サービス」コンポーネントと「値」コンポーネントを依存関係として挿入できます。これについては、$http サービスに関する以前のトピックで説明しました。

$http サービスを AngularJS 内で使用して、 MySQL またはMS SQL サーバーデータベース経由 PHP ウェブアプリケーション。

$http サービスは通常、コントローラー内から次の方法で定義されます。

sampleApp.controller ('AngularJSController', function ($scope, $http)

上記のように $http サービスがコントローラーで定義されているとします。これは、コントローラーが $http サービスに依存していることを意味します。

したがって、上記のコードが実行されると、AngularJS は次の手順を実行します。

「$http サービス」がインスタンス化されているかどうかを確認します。「コントローラー」は「$http サービス」に依存しているため、このサービスのオブジェクトをコントローラーで使用できるようにする必要があります。
$http サービスがインスタンス化されていないことが AngularJS によって検出された場合、AngularJS は「factory」関数を使用して $http オブジェクトを構築します。
次に、Angular.JS 内のインジェクターは、さらなる処理のために $http サービスのインスタンスをコントローラーに提供します。

依存関係がコントローラーに挿入されたので、さらに処理するために $http サービス内で必要な関数を呼び出すことができます。

依存関係の注入の例

この例では、AngularJS で依存関係注入を使用する方法を学びます。

依存性注入は 2 つの方法で実装できます

XNUMX つは「価値コンポーネント」によるものです。
もうXNUMXつは「サービス」によるものです

両方の方法の実装を詳しく見てみましょう。

1) 価値要素

このコンセプトは、シンプルなツールを作成するという事実に基づいています。 Javaスクリプトオブジェクトを取得し、さらに処理するためにコントローラーに渡します。

これは以下の XNUMX つの手順を使用して実装されます

ステップ1） 作る Java値コンポーネントを使用してオブジェクトをスクリプト化し、メインの AngularJS.JS モジュールに添付します。

value コンポーネントは XNUMX つのパラメータを取ります。 XNUMX つはキーで、もう XNUMX つは作成される JavaScript オブジェクトの値です。

ステップ2） アクセス Javaスクリプトオブジェクトから Angular.JS コントローラー

<! 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);
```

Angular.JS JS モジュールの value 関数を使用して、「TutorialID」というキーと値のペアと値「5」を作成します。

sampleApp.controller('AngularJSController', function ($scope,TutorialID)

これで、TutorialID 変数が関数パラメーターとしてコントローラーにアクセスできるようになります。

```
 $scope.ID =TutorialID;
```

TutorialID の値 5 は、$scope オブジェクト内の ID と呼ばれる別の変数に割り当てられています。これは、値 5 をコントローラーからビューに渡すことができるようにするために行われます。

```
{{ID}}
```

ID パラメータはビューに式として表示されます。したがって、ページには「5」の出力が表示されます。

上記のコードを実行すると、出力は次のように表示されます

2）サービス

サービスはシングルトンとして定義される Javaコントローラーで公開および挿入する一連の関数で構成されるスクリプトオブジェクト。

たとえば、「$http」は Angular.JS のサービスであり、コントローラーに挿入されると、必要な機能を提供します。

(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 JS モジュールのサービスパラメーターを使用して、「AdditionService」という新しいサービスを作成しています。

```
 this.Addition = function(a,b)
```

ここでは、サービス内に Addition という新しい関数を作成しています。これは、AngularJS がコントローラー内で AdditionService をインスタンス化すると、「Addition」関数にアクセスできることを意味します。この関数定義では、この関数が XNUMX つのパラメーター a と b を受け入れることを示しています。

```
 return a+b;
```

ここでは、単純にパラメータを追加し、追加された値を返す加算関数の本体を定義しています。

 mainApp.controller('DemoController', function($scope, AdditionService)

これは依存関係の注入を伴う主要なステップです。コントローラー定義では、「AdditionService」サービスを参照しています。 AngularJS がこれを認識すると、「AdditionService」タイプのオブジェクトをインスタンス化します。

 $scope.result = AdditionService.Addition(5,6);

ここでは、サービスで定義されている関数「Addition」にアクセスし、それをコントローラーの $scope オブジェクトに割り当てています。

これは、サービスを定義し、そのサービスの機能をコントローラー内に挿入する方法を示す簡単な例です。

まとめ

依存関係の挿入は、その名前が示すように、実行時に依存する機能をモジュールに挿入するプロセスです。
依存関係の注入を使用すると、コードをより再利用しやすくなります。複数のアプリケーションモジュール間で使用される共通の機能がある場合、最善の方法は、その機能を備えた中央サービスを定義し、そのサービスを依存関係としてアプリケーションモジュールに挿入することです。
AngularJSの値オブジェクトは、単純な Javaコントローラー内のスクリプトオブジェクトを$injectで使用 AngularJS.
サービスモジュールを使用して、複数の AngularJS モジュール間で再利用できるカスタムサービスを定義できます。

よろしければ：

AngularJS の依存性注入とは何ですか?

AngularJS に依存関係として挿入できるコンポーネントはどれですか?

依存関係の注入の例

1) 価値要素

関連記事

2）サービス

まとめ