AngularJSで コントローラー（ Controller ）を別ファイルに分割したい・・・
こう思ったものの、中々やり方が分からなくて苦戦していました。
しかも実際、モジュールから一度定義した コントローラー は再定義できません。
でも あるテクニックを使えば疑似的にControllerの分割ができる みたいです。
ここではそのやり方について、コード例付きでまとめました。
普通のやり方だとControllerは分割できない
まず基本的だけど大事なことについて
AngularJSだとビュー操作に コントローラ（ Controller ） を使いますよね？
その定義には controller メソッドを呼び出して定義できます。
でもこの controller メソッド、実は２度以上呼び出すと上書きされます。
だから別ファイルに分割って本来できません。
例えば次みたいな HTML を書いたとしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!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> |
今回分割したいのは myController っていうコントローラ
そして分割するために次の hoge.js と piyo.js を定義してみます。
|
1 2 3 4 5 6 |
angular.module('myApp', []); app = angular.module('myApp'); app.controller('myController', function($scope){ $scope.text_hoge = 'hogehogehoge'; }); |
|
1 2 3 4 |
app = angular.module('myApp'); app.controller('myController', function($scope){ $scope.text_piyo = 'piyopiyopiyo'; }); |
一見すると、上手くいきそうに思わないですか？
でも残念、controller メソッドを２度呼び出すと上書きされちゃいます。
なので最後に呼び出した controller メソッドしか有効になりません。
ではどうすればコントローラを上手く分割できるのか・・・
僕自身、悩みに悩んだんですが、実は驚くほど簡単な解決策がありました。
Controllerを分割する "一番簡単" なやり方＆コード例
そのやり方とは・・・
分割したい Controller に $scope を渡してあげればいいだけ
たったこれだけでコントローラの分割ってできます。
実際のやり方を例に出すなら次の通り
まずコントローラを定義するのは１つのファイルのみにします。
例えばさっきの例でいうなら、 hoge.js のみに定義する感じ
|
1 2 3 4 5 6 7 8 9 10 |
angular.module('myApp', []); app = angular.module('myApp'); app.controller('myController', function($scope){ $scope.text_hoge = 'hogehogehoge'; /// ↓ここに注目！ app.expandController($scope); }); |
ハイライトした７～８行目に注目
ここで expandController っていうメソッドに $scope を渡してます。
このメソッドは分割先で定義するだけなので、任意の名前で構いません。
そうしたら分割先のファイルで expandController を定義してあげればいいだけです。
例えば次コードみたいに
|
1 2 3 4 |
/// 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）を分割する方法でした。ではでは(^_^)/~
