AngularJSでControllerを別ファイルに分割するテクニック

AngularJSでコントローラー（ Controller ）を別ファイルに分割したい・・・

こう思ったものの、中々やり方が分からなくて苦戦していました。

しかも実際、モジュールから一度定義したコントローラーは再定義できません。

でもあるテクニックを使えば疑似的にControllerの分割ができるみたいです。

ここではそのやり方について、コード例付きでまとめました。

このページの目次

普通のやり方だとControllerは分割できない
Controllerを分割する "一番簡単" なやり方＆コード例
ここまでのまとめ

普通のやり方だとControllerは分割できない

まず基本的だけど大事なことについて

AngularJSだとビュー操作にコントローラ（ Controller ）を使いますよね？

その定義には controller メソッドを呼び出して定義できます。

でもこの controller メソッド、実は２度以上呼び出すと上書きされます。

だから別ファイルに分割って本来できません。

例えば次みたいな HTML を書いたとしましょう。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>{{title}}</title>
</head>
<body ng-controller="myController">
{{text_hoge}}
{{text_piyo}}
</body>
</html>

<!DOCTYPE html>

<head>

<title>{{title}}</title>

</head>

</body>

</html>

今回分割したいのは myController っていうコントローラ

そして分割するために次の hoge.js と piyo.js を定義してみます。

angular.module('myApp', []);

app = angular.module('myApp');
app.controller('myController', function($scope){
  $scope.text_hoge = 'hogehogehoge';
});

angular.module('myApp', []);

app = angular.module('myApp');

app.controller('myController', function($scope){

$scope.text_hoge = 'hogehogehoge';

});

app = angular.module('myApp');
app.controller('myController', function($scope){
  $scope.text_piyo = 'piyopiyopiyo';
});

app = angular.module('myApp');

app.controller('myController', function($scope){

$scope.text_piyo = 'piyopiyopiyo';

});

一見すると、上手くいきそうに思わないですか？

でも残念、controller メソッドを２度呼び出すと上書きされちゃいます。

なので最後に呼び出した controller メソッドしか有効になりません。

ではどうすればコントローラを上手く分割できるのか・・・

僕自身、悩みに悩んだんですが、実は驚くほど簡単な解決策がありました。

Controllerを分割する "一番簡単" なやり方＆コード例

そのやり方とは・・・

分割したい Controller に $scope を渡してあげればいいだけ

たったこれだけでコントローラの分割ってできます。

実際のやり方を例に出すなら次の通り

まずコントローラを定義するのは１つのファイルのみにします。

例えばさっきの例でいうなら、 hoge.js のみに定義する感じ

angular.module('myApp', []);

app = angular.module('myApp');
app.controller('myController', function($scope){
  $scope.text_hoge = 'hogehogehoge';
  
  /// ↓ここに注目！
  app.expandController($scope);
  
});

angular.module('myApp', []);

app = angular.module('myApp');

app.controller('myController', function($scope){

$scope.text_hoge = 'hogehogehoge';

/// ↓ここに注目！

app.expandController($scope);

});

ハイライトした７～８行目に注目

ここで expandController っていうメソッドに $scope を渡してます。

このメソッドは分割先で定義するだけなので、任意の名前で構いません。

そうしたら分割先のファイルで expandController を定義してあげればいいだけです。

例えば次コードみたいに

/// hoge.jsで定義した関数を使う
angular.module('myApp').expandController = function($scope){
  $scope.text_piyo = 'piyopiyopiyo';
}

/// hoge.jsで定義した関数を使う

angular.module('myApp').expandController = function($scope){

$scope.text_piyo = 'piyopiyopiyo';

}

こういう風に $scope を通しあげれば、
ビュー操作やビューの書き換え・取得ができるという仕組み

これで piyo.js 内でもコントローラが使えるようになりました。

簡単なテクニックだけど、 controller を別ファイルに分割するなら超便利です。

ここまでのまとめ

ということで簡単に今までのまとめ

普通は controller は分割NG
なぜなら contorller メソッドは２度以上呼び出すと、最後で上書きされるから。別ファイルで controller を別々に呼び出すのは絶対NG！
分割先に $scope を渡してやればOK
代わりに controller を呼び出したファイルから、分割先に $scope を渡してあげれば万事解決。これでビュー操作が分割先でもできるように

複数定義はムリだけど、疑似的に分割することならできます。

以上、AngularJSでコントローラ（Controller）を分割する方法でした。ではでは(^_^)/~