AngularJSアプリでの依存関係の挿入

AngularJS で関数引数、配列引数、および API サービスを使用して依存関係を渡す方法の概要$inject。

Dhananjay Kumar Last Updated Feb 25, 2025 5min read

AngularJSの最初の特性を学び始めると、Dependency Injection(DI)と呼ばれるものに出くわすかもしれません。これは、アプリケーションが必要とするたびにAngularJSが依存関係を注入するという前提です。開発者としての私たちの仕事は、依存関係をモジュールに渡すことだけであり、他のすべてはAngularJSによって処理されます。これで、市場で最高のAngularコンポーネントライブラリの1つであるIgnite UI for Angularを使用して、すべてが簡単な方法でどのように行われるかをお見せできます。

コントローラーを作成するには、$scopeオブジェクトとその他の依存関係をモジュールのコントローラー関数に渡します。たとえば、ProductController を作成するには、オブジェクトと Calculator サービスの依存関係$scope渡します。これは、開発者としての私たちの仕事は依存関係を渡すことであり、AngularJSはアプリケーションが必要とするたびに依存関係を挿入するという知識を繰り返し示しています。

コントローラーを作成し、$scopeオブジェクトとその他の依存関係をモジュールのコントローラー関数に渡します

私たちの立場からすると、AngularJSが依存関係をどのように注入するかについては実際には気にしません - アプリケーションを開発するために注入プロセスがどのように機能するかを知る必要はありません。ただし、依存関係を渡すためのさまざまな方法を知っていると、より適切です。AngularJS では、依存関係は 3 つの方法で渡すことができます。それらは次のとおりです。

依存関係を関数の引数として渡す
依存関係を配列引数として渡す
$inject サービスを使用した依存関係の受け渡し

これらのオプションを1つずつ調べてみましょう。

依存関係を関数の引数として渡す

おそらく、依存関係を関数の引数として頻繁に渡すことに気付くかもしれませんが、それはまったく問題ありません。たとえば、次のリストに示すように、$scopeオブジェクトを渡してコントローラーを作成します。

app.controller("ProductController", function ($scope) {
    $scope.message = "Hey I am passed as function argument"
});

依存関係を関数の引数として渡すことは、アプリケーションを縮小されたバージョンのアプリケーションを使用して本番環境にデプロイするまではうまく機能します。通常、パフォーマンスを向上させるために、本番環境でアプリケーションを縮小しますが、アプリケーションを縮小するときに依存関係を関数の引数として渡すと壊れます。

依存関係を関数の引数として渡すことは、アプリケーションをデプロイするまではうまく機能します

明らかに、本番環境では、パフォーマンスを向上させるために、縮小されたバージョンのアプリケーションをデプロイしたいと考えていますが、パラメータ名が短いエイリアス名に変わるため、アプリケーションが壊れます。この生産の中断を避けるために、別のオプションを選択する必要があります。

依存関係を配列引数として渡す

おそらく、AngularJSアプリケーションで依存関係を渡す最も一般的な方法は、それらを配列引数として渡すことです。依存関係を配列引数として渡すと、アプリケーションを縮小するときにアプリケーションが本番環境で中断されません。これには、次の 2 つの方法があります。

名前付き関数の使用
インライン匿名関数の使用

名前付き関数の使用

以下のリストに示すように、依存関係を名前付き関数の配列引数として渡すことができます。

var app = angular.module('app', []);

function ProductController($scope) {
    $scope.greet = "Infragistics";
};
app.controller('ProductController', ['$scope', ProductController]);

お気づきのように、配列内の依存関係$scopeオブジェクトをコントローラー関数の名前とともに渡しています。複数の依存関係を渡すことができます (コンマで区切られている限り)。たとえば、以下のリストに示すように、$httpサービスと$scopeオブジェクトの両方を依存関係として渡すことができます。

var app = angular.module('app', []);

function ProductController($scope,$http) {
    $scope.greet = $http.get("api.com");       
};
app.controller('ProductController', ['$scope','$http', ProductController]);

前に説明したように、依存関係を配列引数として渡しても、アプリケーションを縮小するときにアプリケーションが壊れることはありません。

インライン匿名関数の使用

個人的には、名前付き関数を使用する方が、インライン無名関数を使用するよりもはるかに便利だと思います。私にとっては、名前付きコントローラー機能を管理するのは簡単です。インライン関数を好む場合は、名前付きコントローラー関数で渡すのとまったく同じ方法で、依存関係を配列引数として渡すことができます。以下のリストに示すように、インライン関数で依存関係を配列引数として渡すことができます。

var app = angular.module('app', []);

app.controller('ProductController', ['$scope', '$http', function ($scope,$http) {
    $scope.greet = "Foo is Great!"
}]);

Array 引数として挿入された依存関係は、アプリケーションを縮小しても機能することに注意してください。

$inject サービスを使用した依存関係の受け渡し

AngularJSに依存関係を挿入するもう1つの方法は、$injectサービスを使用することです。その際、依存関係を手動で挿入します。以下のリストに示すように、$injectサービスを使用して$scopeオブジェクトの依存関係を挿入できます。

function ProductController($scope){
    $scope.greet = "Foo is Not Great!5";
}

ProductController.$inject = ['$scope'];

app.controller('ProductController', ProductController);

$injectサービスを使用しても、アプリケーションを本番環境用に縮小するときにアプリケーションが壊れることはありません。ほとんどの場合、コントローラーの単体テストで依存関係を注入するために$injectサービスが使用されています。

この記事を終了する前に、$injectを使用してリアルタイムアプリケーションでコントローラーにサービスを挿入する方法を見てみましょう。以下のリストに示すように、サービスを作成しました。

app.factory("Calculator", function () {
    return {
        add: function (a, b) {
            return a + b;
        }
    }
});

CalController内でCalculatorサービスを使用する必要があります。CalController は、次のリストに示すように作成できます。

app.controller('CalController', CalController);
function CalController($scope, Calculator) {

    $scope.result = 0;
    $scope.add = function () {
        alert("hi22");
        $scope.result= Calculator.add($scope.num1, $scope.num2);
    }
};

この時点では、依存関係が関数の引数として渡されるため、アプリケーションは動作するはずです。ただし、縮小するとアプリケーションが壊れます。それでは、先に進んで、以下のリストに示すように、$injectを使用して依存関係を挿入しましょう。

CalController.$inject = ['$scope', 'Calculator'];

ビューでは、コントローラーを次のように使用できます。

<div ng-controller="CalController">
    <input type="number" ng-model="num1" placeholder="Enter number 1" />
    <input type="number" ng-model="num2" placeholder="Enter number 2" />
    <button ng-click="add()">Add</button>
    {{result}}
</div>

これで、AngularJSアプリで依存関係を差し挟む最も簡単な方法がわかりました。

Angular