控制器在單個模塊中聲明時未定義

Question

有一些我不完全瞭解AngularJS。如果我這樣聲明控制器：

angular.module('ngApp', []).controller('AboutCtrl', ['$scope', function ($scope) { 
    $scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma']; 
}]); 

angular.module('ngApp', []).controller('ContactCtrl', ['$scope', function ($scope) { 
    $scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma']; 
}]); 

angular.module('ngApp', []).controller('MainCtrl', ['$scope', function ($scope) { 
    $scope.awesomeThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma']; 
}]); 

...每當我試圖測試他們只是其中之一通過測試的情況下（S）：

describe('MainCtrl', function() { 
    var scope; 

    beforeEach(module('ngApp')); 
    beforeEach(inject(function ($rootScope, $controller) { 
    scope = $rootScope.$new(); 
    $controller('MainCtrl', { $scope: scope }); 
    })); 

    it('should attach a list of `awesomeThings` to the scope', function() { 
    expect(scope.awesomeThings.length).toBe(3); 
    }); 
}); 

（我也有三個文件與重複相同的測試用例，唯一發生變化的是控制器名稱：AboutCtrl和ContactCtrl位於應用程序位置）。另一方面，如果我說：var app = angular.module('ngApp', []);然後「附加」到它的控制器，一切工作正常。如果我將它們連接到同一個鏈上，我也是一樣的angular.module('ngApp', []).controller(/* ... */).controller(/* ... */);

我希望它們分開的原因是因爲我想讓它們在（三... N）個不同的文件中。

任何人有任何線索？

Answer 1

您每次都重新聲明您的ngApp模塊，而不是獲取已經聲明的模塊。

從約翰爸爸的Angular Style Guide：

•僅設置一次，並獲得所有其他實例。

爲什麼？：一個模塊應該只創建一次，然後從該點和之後檢索。

/* recommended */ 

// to set a module 
angular.module('app', []); 

// to get a module 
angular.module('app'); 

Answer 2

通過調用angular.module('ngApp', [])要創建一個新的模塊，而不是重複使用相同的一個。爲了做到這一點只需調用.module與應用程序的名稱並沒有其他的說法

angular.module（ 'ngApp'）

file1.js

angular.module('ngApp').controller(...); 

file2.js

angular.module('ngApp').controller(...); 

你也可以將模塊保存到一個全局變量，只是使用該變量

main.js

變種應用= angular.module（ 'ngApp'，[]）;

file1.js

app.controller(...); 

file2.js

app.controller(...);