Контроллеры AngularJS как-то сталкиваются

Question

У меня есть приложение с несколькими видами и контроллерами. Контроллеры определяются в отдельных файлах .js и включены в нижнюю часть главной страницы. Однако при загрузке приложения один из контроллеров не загружается. Я упростил проблему и включил полный контент обоих JS-файлов в один.

С кодом ниже я получаю Argument 'ShellCtrl' is not a function, got undefined:

(function() { 
    var app = angular.module("app", []);  

    var shellCtrl = function ($scope, $log) { 
    // .... 

    app.controller("ShellCtrl", ["$scope", "$log", shellCtrl]); 
})(); 

(function() { 
    var app = angular.module("app", []); 

    var svcCenterSettingsCtrl = function($log) { 
    // .... 

    app.controller("ServiceCenterSettingsCtrl", ["$log", svcCenterSettingsCtrl]); 
})(); 

Если ServiceCenterSettingsCtrl зарегистрирован первый, то я получаю Argument 'ServiceCenterSettingsCtrl' is not a function, got undefined.

Однако, если я зарегистрирую их в рамках одной и той же функции самостоятельного выполнения, как показано ниже, она работает.

(function() { 
    var app = angular.module("app", []);  

    var shellCtrl = function ($scope, $log) { 
    // .... 

    app.controller("ShellCtrl", ["$scope", "$log", shellCtrl]); 


    var svcCenterSettingsCtrl = function($log) { 
    // .... 

    app.controller("ServiceCenterSettingsCtrl", ["$log", svcCenterSettingsCtrl]); 
})(); 

Есть ли опечатка, которую я не вижу, или я делаю что-то принципиально неправильно?

Answer 1

Вы объявляете модуль приложения дважды в первом образце кода:

var app = angular.module("app", []);  

Модули могут быть зарегистрированы только один раз. Для ссылки на уже зарегистрированный модуль, который вы должны удалить второй параметр из функции:

var app = angular.module("app");