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'];
}]);

...每当我尝试测试它们时，只有其中一个通过了测试用例：

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);
  });
});

（我还有三个重复相同测试用例的文件，唯一改变的是控制器名称：apprpriate位置中的AboutCtrl和ContactCtrl。

另一方面，如果我说：var app = angular.module('ngApp', []);然后＆＃34;附上＆＃34;对它的控制器，一切正常。如果我将它们连接到一个angular.module('ngApp', []).controller(/* ... */).controller(/* ... */);

中的相同链中，也是如此

我希望它们分开的原因是因为我希望将它们放在（三个...... N）个不同的文件中。

任何人都有任何线索？

Answer 1

您每次都会重新声明您的ngApp模块，而不是获取已经声明的模块。

来自John Papa的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

var app = angular.module（'ngApp'，[]）;

<强> file1.js

app.controller(...);

<强> file2.js

app.controller(...);

在单个模块中声明时，控制器未定义

2 个答案: