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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

 

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

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

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

そのやり方とは・・・

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

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

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

 

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

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

ハイライトした7~8行目に注目

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

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

 

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

例えば次コードみたいに

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

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

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

ここまでのまとめ

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

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください