Angular複数ファイルでの読み込み

投稿日：2017年3月17日

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。

ざっくり分けると

ほとんどの処理に共通な処理を集めたファイル
特定の画面に特化したファイル

になるでしょう。物凄くざっくり分けた場合ですが・・・

プログラムでは上記のように書き、役割分担をすることが当たり前になっていますが、JSでも近年でそのようなことをするのが一般的なようですね。

このためにはコントローラー自体を分割することが重要になってきます。

今ファイルを親コントローラー(parentController)、子コントローラ(childController) ,モジュール登録(app.js)に分けるとします。

parent.controller.js

var parentController = function ( $scope, $http , $location, $filter) {

    $scope.parentMessage ="parentのメッセージです";

    $scope.showParentMessage = function() {
        //子供は呼べません
    	console.log($scope.childMessage);
        console.log("本日は晴天なり");
    }

};

var parentController = function ( $scope, $http , $location, $filter) {

$scope.parentMessage ="parentのメッセージです";

$scope.showParentMessage = function() {

//子供は呼べません

console.log($scope.childMessage);

console.log("本日は晴天なり");

}

};

child.controller.js

var childController = function ( $scope, $http , $location, $filter) {

    $scope.childMessage ="childのメッセージです";

    $scope.showChildMessage = function() {
    	 //親を呼ぶことはできます
         console.log($scope.parentMessage);
         console.log("本日は晴天なり子供");
    }

};

var childController = function ( $scope, $http , $location, $filter) {

$scope.childMessage ="childのメッセージです";

$scope.showChildMessage = function() {

//親を呼ぶことはできます

console.log($scope.parentMessage);

console.log("本日は晴天なり子供");

}

};

app.js

//コントローラを登録し、モジュールを作成します。
//先に登録したControllerのほうが親になります。
var app = angular.module('app', [])
                 .controller('parentController' ,parentController)
                 .controller('childController' ,childController);

//コントローラを登録し、モジュールを作成します。

//先に登録したControllerのほうが親になります。

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

.controller('parentController' ,parentController)

.controller('childController' ,childController);

HTML

<!doctype html>
<html>
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/controllers/parent.controller.js"></script>
<script src="js/controllers/child.controller.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="parentController">
       <!-- 大丈夫 -->
       {{parentMessage}}

        <div ng-controller="childController">
            <!-- 親なので表示される -->
            {{parentMessage}}

            <!-- 親なのでOK -->
            <div ng-click="showParentMessage()">子供の中でもOK</div>
            {{childMessage}}

            <!-- ここは有効です。 -->
            <div ng-click="showChildMessage()">もちろん自分は呼べます</div>

        </div>
        <!--  表示されない -->
        {{childMessage}}

        <!-- よべない -->
        <div ng-click="showChildMessage()">ここでは呼べません</div>

</div>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<div ng-click="showParentMessage()">子供の中でもOK</div>

<div ng-click="showChildMessage()">もちろん自分は呼べます</div>

</div>

<div ng-click="showChildMessage()">ここでは呼べません</div>

</div>

</body>

</html>

今までと違うところは関数を変数化し、一番最後のファイルapp.jsで最後にControllerの登録とモジュール作成を行っています。上記のようなControllerの登録の仕方によって親子関係が決まります。子供は親を呼べますが、親は子の変数やメソッドをよぶことができません。

またHTMLでControllerで制御している外は当然影響範囲外になります。

参考図書

AngularJSリファレンス

以前立ち読みした時点ではボコボコだったんですが、今の段階で読むとわかる部分がかなり増えてました。多少古いですが(2014/09)かなりまとまっており、いい本だと思います。