angular.module の落とし穴

angular.module関数を呼び出すとき、第２引数に配列を指定する場合と、指定しない場合で、意味が異なる。

• 第２引数に配列を指定する場合

// myModuleを新規に作成し、既存のmyModuleが存在した場合には、上書きする。
angular.module('myModule', []);

• 第２引数を指定しない場合

// 既存のmyModuleを取得する。
angular.module('myModule');

• 「第２引数を指定しない場合」のパターンでは、myModuleが存在していない場合に、次のようなエラーになる。

Uncaught Error: [$injector:nomod] Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

落とし穴

例えばモジュールにコントローラを設定する際に、「第２引数に配列を指定する場合」のパターンでモジュールを取得した場合、既存のモジュールを上書きしてしまう。

// myModuleモジュールを作成し、AControllerを設定する。
angular.module("myModule", []) .controller("AController", AController);

// myModuleモジュールを作成し、BControllerを設定する。既存のmyModuleは上書きされる。
angular.module("myModule", []) .controller("BController", BController);

このとき、AControllerの設定は上書きされてなくなってしまうので、AControllerを使用する箇所で、次のようなエラーになる。

Error: [ng:areq] Argument 'AController' is not a function, got undefined

モジュールを複数回呼び出す場合には、初回のみ「第２引数に配列を指定する場合」のパターンでモジュールを新規作成し、２回目以降は「第２引数を指定しない場合」のパターンでモジュールを取得するようにする。

// myModuleの新規作成
angular.module("myModule", []);

// 既存のmyModuleにコントローラを設定
angular.module("myModule") .controller("AController", AController);

// 既存のmyModuleにコントローラを設定
angular.module("myModule") .controller("BController", BController);

// AController と BController を使用可能

参照：https://docs.angularjs.org/guide/moduleの「Creation versus Retrieval」の項目に仕様の記述