【第4回】「AngularJS」を使用してみたい！　～DIコンテナー～

０、前回までの内容

【第３回】「AngularJS」を使用してみたい！　～双方向データバインディング～では、「AngularJS」の特徴のひとつである「双方向データバインディング」について説明しました。今回の記事では、「AngularJS」のもうひとつの特徴である「DIコンテナー」について説明していこうと思います。

１、DIコンテナーとは？

DIコンテナーとは、「DI（Dependency Injection：依存性の注入）」と呼ばれるデザインパターンを利用して開発されたアプリケーションを管理するためのソフトウェアのことです。DI（依存注入）とは、クラスが他のクラスをインスタンス化を生成し利用するといった依存関係を持たないようにするデザインパターンです。AngularJSでは、作成したサービスを使用する際は、そのサービスの名前を持って利用することを宣言します。これによりDIコンテナーであるAnglarJSが使用するサービスのインスタンス化を行い、サービスを使用できる状態にしてくれます。では、実際にDIコンテナーを使用したプログラムを見ていきたいと思います。

２、DIコンテナーを利用してみる

実は前回のプログラムでDIコンテナーを使用しているので今回も同じプログラムを使用します。

index.html

<!doctype html>
<html ng-app="calcPage">
<head>
    <meta charset="UTF-8">
    <title>【第三回】計算ページ</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="./js/calcPage.js"></script>
</head>
<body ng-controller="CalcController">
    <div>
        <label for="number1">数字1：</label>
        <input type="number" id="number1" ng-model="number1">
    </div>
    <div>
        <label for="number2">数字2：</label>
        <input type="number" id="number2" ng-model="number2">
    </div>
    <div>
        数字1＋数字2={{calcResult(number1,number2)}}
    </div>
</body>
</html>

calcPage.js

angular.module('calcPage',[])
    .controller('CalcController',['$scope','SetCalcResult',function($scope,SetCalcResult) {
        $scope.calcResult = function(number1,number2) {
            return SetCalcResult.calc(number1,number2);
        };
    }])
    .service('SetCalcResult',[function() {
        this.calc = function(num1,num2) {
            if(num1=== undefined) {
                num1 = 0;
            }
 
            if(num2=== undefined) {
                num2 = 0;
            }
 
            return num1 + num2;
        };
    }]);

実行結果

このプログラムでのDIコンテナーの使用は、サービスの定義をcalcPage.jsの7行目、サービスの使用をcalcPage.jsの2行目で行っています。
AngularJSでは、名前による紐付けを行いDIを実現します。今回の場合、サービスの名前を「SetCalcResult」と定義しています。そのため、それを使用するコントローラーでは引数の配列に「SetCalcResult」を記載しています。この指定によりコントローラーではサービスを使用することが可能になります。ちなみに、コントローラーのfunctionの引数名は変更しても問題ありません。たとえば、下記のような記載をすることができます。

「controller(‘CalcController,[‘$scope’,’SetCalcResult’,function(a,b) {」

このようにAngularJSでは、少し書き方が独特に感じるものの簡単にDIコンテナーの機能を利用することができます。

３、次回の記事について

今回は「AngularJS」の特徴であるDIコンテナーについて説明しました。次回は「AngularJS」の三つ目の特徴であるHTMLテンプレート機能について説明していきたいと思います。

「AngularJS」を使用してみたい！　記事一覧