吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

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

2013年11月25日 / category : angularjs, その他

メインのモジュールに、別のモジュールを読みんでみます。

別のモジュールを読み込むときは、下記のような記述をします。

var myApp = angular.module('app', ['別モジュール名','別モジュール名']);

配列の中に追加するカタチで記述します。
モジュールの読み込みが完了したタイミングで関数を実行する場合は、

var myApp = angular.module('app', ['別モジュール名','別モジュール名'], function(){
	//モジュールの読み込み完了処理
});

もしくは、

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

myApp.config(function(){
	//モジュールの読み込み完了処理
});

というカタチで記述します。
この関数をconfig関数と呼び、指定方法もいくつかあるようですが、今回は省略します。

それではサンプルを基に、別モジュールの読み込みを見てみましょう。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/2/
■サンプルファイル一式
ダウンロード – zip
■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div id="container" class="cf" ng-controller="MainCtrl">

<dl>
<dt>MainCtrl</dt>
<dd>{{msg}}</dd>
</dl>

<div id="side" ng-controller="SideCtrl">
<dl>
<dt>SideCtrl</dt>
<dd>{{msg}}</dd>
</dl>
</div>

<div id="contents" ng-controller="ContentsCtrl">
<dl>
<dt>ContentsCtrl</dt>
<dd>{{msg}}</dd>
</dl>
</div>

</div>

</body>
■JavaScript – app.js
var myApp = angular.module('app',
	['SideModule', 'ContentsModule']
);

myApp.controller('MainCtrl', ['$scope', function($scope){
	$scope.msg = 'main completed';
}]);

myApp.config(function(){
	alert('config function');
});
■JavaScript – controllers.js
var sideCtrl = angular.module('SideModule', []);
var contentsCtrl = angular.module('ContentsModule', []);

sideCtrl.controller('SideCtrl', ['$scope', function($scope){
	$scope.msg = 'side completed';
}]);

contentsCtrl.controller('ContentsCtrl', ['$scope', function($scope){
	$scope.msg = 'contents completed';
}]);
■解説
まず、ファイル構成ですが、app.jsは、メインのモジュールを管理し、controllers.jsで、別モジュールを管理するようにファイルを分けました。
var myApp = angular.module('app',
	['SideModule', 'ContentsModule']
);

ここで、任意で命名した「SideModule」「ContentsModule」というモジュールを読み込んでいます。
で、このモジュールがどこにあるかというと、

var sideCtrl = angular.module('SideModule', []);
var contentsCtrl = angular.module('ContentsModule', []);

ここです。
それぞれ「sideCtrl」「contentsCtrl」という変数に格納しています。

そして、それぞれcontroller関数で、スコープを指定し、そのスコープ内で処理を行っています。

//HTML側でng-controller="SideCtrl"を指定している範囲
sideCtrl.controller('SideCtrl', ['$scope', function($scope){
	$scope.msg = 'side completed';
}]);

//HTML側でng-controller="ContentsCtrl"を指定している範囲
contentsCtrl.controller('ContentsCtrl', ['$scope', function($scope){
	$scope.msg = 'contents completed';
}]);