Angularモジュール間の読み込み

投稿日：2017年3月21日更新日：2020年5月10日

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。

プログラムでこれらを役割分担させるようにAngularでも分けることが一般的なようです。これら1つ1つの部品のことはモジュールと呼ばれます。

AngularJSでは書き初めに、

var app = angular.module("app", [])

1	var app = angular.module("app", [])

のように定義しますが、これが1つ1つのモジュールになります。

基本的にはこの単位でモジュールをつくりますが、最初は[”]で書いているものが多いと思いますが、他のモジュールを読み込む場合はここに別のモジュールを引数として取ることになります。

モジュールを細分化して読み込む

例えば空白チェックをするようなユーティリティーのモジュールを作るとします。ファイル名util.jsとします。

その場合、Serviceというサービスを登録して、モジュールを作り、これを使うことが多いようです。

util.js

var appUtil = angular.module('appUtil', [])
.service('utils', function(){
    var utilObj = {};

    utilObj.isBlank = function( val ){
        return ( val === undefined || val === "" );
    }

    return utilObj
});

var appUtil = angular.module('appUtil', [])

.service('utils', function(){

var utilObj = {};

utilObj.isBlank = function( val ){

return ( val === undefined || val === "" );

}

return utilObj

});

これを実行させたいファイルで読み込む場合下記のようになります。

//このファイルは当然util.jsより後に読み込みます。
//[]でappUtilを読み込みます。
var app = angular.module("app", ['appUtil'])
app.controller("mainCtrl", ['$scope', '$http', '$location' , '$filter' , 'utils' , function ( $scope, $http , $location, $filte ,utils) {  
    //引数としてutilsを定義することで使えるようになります。
    $scope.hasError = function( value ){ return !utils.isBlank(value);}
});

//このファイルは当然util.jsより後に読み込みます。

//[]でappUtilを読み込みます。

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

app.controller("mainCtrl", ['$scope', '$http', '$location' , '$filter' , 'utils' , function ( $scope, $http , $location, $filte ,utils) {

//引数としてutilsを定義することで使えるようになります。

$scope.hasError = function( value ){ return !utils.isBlank(value);}

});

※似たようなものにFactoryというサービスもあります。

違いなどは下記リンク参照。

Angular.jsのServiceとFactoryの違いを考える

constant

また設定情報などを格納するサービスとしてはconstantというものがあります。

こちらも下記のようにしてモジュール登録し、呼び出したい側で読み込めばOKです。ファイル名をconstant.jsとします。

constant.js

var appConf = angular.module('appConf', []).constant('CONFIG', {
      DOMAIN:'http://192.168.33.10',
      URL_BASE: 'http://192.168.33.10/hogehoge/'
});
~

var appConf = angular.module('appConf', []).constant('CONFIG', {

DOMAIN:'http://192.168.33.10',

URL_BASE: 'http://192.168.33.10/hogehoge/'

});

呼び出したい側

var app = angular.module("app", ['appUtil','appConf'])
app.controller("mainCtrl", ['$scope', '$http', '$location' , '$filter' , 'utils' , 'CONFIG',function ( $scope, $http , $location, $filte ,utils ,CONFIG) {  
    console.log(CONFIG.DOMAIN)
});

var app = angular.module("app", ['appUtil','appConf'])

app.controller("mainCtrl", ['$scope', '$http', '$location' , '$filter' , 'utils' , 'CONFIG',function ( $scope, $http , $location, $filte ,utils ,CONFIG) {

console.log(CONFIG.DOMAIN)

});

環境毎にAngularJSのconstantを切り替える方法