全局定义的AngularJS控制器和封装

Question

根据AngularJS的教程,控制器函数仅位于全局范围内.

http://docs.angularjs.org/tutorial/step_04

控制器功能本身是否自动被解析为封装范围,还是它们居住在全球范围内？我知道他们传递了对自己的$ scope的引用,但看起来这个函数本身只是坐在全局范围内.显然,这可能会导致问题,我已经通过经验和教育来学习封装.此外,如果他们确实居住在全球范围内,那么将它们封装在要引用的对象中是不是最佳实践:

    Object.functionName();

而不是这个:

    functionName();

以防止全球范围内的污染(即重写功能等)发生的问题.

Answer 1

AngularJS支持两种注册控制器函数的方法 - 作为全局可访问函数(您可以在上述教程中看到此表单)或作为模块的一部分(形成一种命名空间).有关模块的更多信息可以在这里找到:http://docs.angularjs.org/guide/module但总之,可以在模块中注册控制器,如下所示:

angular.module('[module name]', []).controller('PhoneListCtrl', function($scope) {

  $scope.phones = [..];

  $scope.orderProp = 'age';
});

AngularJS在许多示例中使用了一种简短的全局函数形式的声明控制器,但是这种形式适用于快速采样,因此不应该在实际应用中使用.

简而言之:AngularJS可以正确地封装控制器函数,但也暴露了一种更简单,快速和脏的方式将它们声明为全局函数.

Answer 2

您可以将控制器注册为模块的一部分,如pkozlowski-opensource所述.

如果需要缩小,可以通过在列表中的实际函数之前提供变量名来简单地扩展它:

angular.module('[module name]', []).
  controller('PhoneListCtrl', ['$scope', function($scope) {

    $scope.phones = [..];
    $scope.orderProp = 'age';
  }]);

这将在"缩小"之后起作用:

angular.module('[module name]', []).
  controller('PhoneListCtrl', ['$scope', function(s) {

    s.phones = [..];
    s.orderProp = 'age';
  }]);

这种表示法可以在依赖注入的 "内联注释"下找到.

要测试已注册为模块一部分的控制器,您必须要求angular来创建控制器.例如:

describe('PhoneListCtrl test', function() {
  var scope;
  var ctrl;

  beforeEach(function() {
    module('[module name]');
    inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      ctrl = $controller('[module name]', {$scope: scope});
    });
  });

  it('should be ordered by age', function() {
    expect(scope.orderProp).toBe('age');
  });

});

这种测试控制器的方法可以在了解控制器组件的 "测试控制器"下找到.