Определенные глобально контроллеры и инкапсуляция AngularJS

Согласно учебнику AngularJS, функция контроллера просто находится в глобальной области.

Выполняют ли функции контроллера самостоятельно автоматически анализируются в инкапсулированную область или они живут в глобальной области? Я знаю, что им передается ссылка на их собственную область $scope, но оказывается, что сама функция просто сидит в глобальной области. Очевидно, что это может вызвать проблемы в будущем, и я научился через опыт и образование, чтобы инкапсулировать. Более того, если они будут жить в рамках глобального масштаба, не следует ли считать лучшей практикой инкапсулировать их в объект, на который нужно ссылаться

Итак, чтобы предотвратить проблемы, связанные с загрязнением глобальной сферы действия (т.е. переопределяющие функции и т.д.)

Ответы

Ответ 1

AngularJS поддерживает 2 метода регистрации функций контроллера - либо как глобально доступные функции (вы можете увидеть эту форму в упомянутом учебнике), либо как часть модулей (которые образуют свое пространство имен). Более подробную информацию о модулях можно найти здесь: http://docs.angularjs.org/guide/module, но вкратце зарегистрировать контроллер в модуле следующим образом:

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

  $scope.phones = [..];

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

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

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

Ответ 2

Вы можете зарегистрировать контроллер как часть модуля, как ответили pkozlowski-opensource.

Если вам нужна минификация, вы можете просто расширить ее, указав имена переменных перед фактической функцией в списке:

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

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

Это будет работать так же после "minification":

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

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

Это обозначение можно найти в разделе "Inline Annotation" в Injection Dependency.

Чтобы протестировать контроллер, который был зарегистрирован как часть модуля, вы должны попросить 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');
  });

});

Этот метод тестирования контроллера можно найти в разделе "Контрольные контроллеры" на Понимание компонента контроллера.