글로벌하게 정의된 각도JS 컨트롤러 및 캡슐화

글로벌하게 정의된 각도JS 컨트롤러 및 캡슐화

Angular에 따라JS의 튜토리얼에서는 컨트롤러 함수가 글로벌 범위 내에 있습니다.

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

컨트롤러 기능 자체가 자동으로 캡슐화된 스코프로 해석됩니까, 아니면 글로벌 스코프 내에 상주합니까?자신의 $scope에 대한 참조가 전달되고 있는 것은 알고 있습니다만, 기능 자체는 글로벌한 범위에 있는 것 같습니다.분명히 이것은 장래에 문제를 일으킬 수 있습니다.또한 경험과 교육을 통해 캡슐화하는 것을 배웠습니다.또한 이러한 캡슐화가 글로벌 범위 내에 존재한다면 다음과 같이 참조되는 오브젝트 내에 캡슐화하는 것이 베스트 프랙티스로 간주되지 않을까요?

    Object.functionName();

이것보다는:

    functionName();

글로벌 스코프의 오염에 의한 문제(기능 우선 등)를 방지하기 위해

AngularJS는 컨트롤러 기능을 글로벌하게 액세스 가능한 함수(이 형식은 전술한 튜토리얼에서 확인할 수 있음) 또는 모듈의 일부(일종의 네임스페이스를 형성함)로 등록하는 두 가지 방법을 지원합니다.모듈에 대한 자세한 내용은 http://docs.angularjs.org/guide/module을 참조하십시오.단, 다음과 같이 모듈에 컨트롤러를 등록합니다.

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

  $scope.phones = [..];

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

AngularJS는 많은 예에서 컨트롤러를 선언하는 짧은 글로벌 함수 형식을 사용하지만, 이 형식은 빠른 샘플에는 적합하지만 실제 애플리케이션에서는 사용하지 않는 것이 좋습니다.

요약: 각진JS는 컨트롤러 함수를 적절하게 캡슐화할 수 있지만 글로벌 함수로 선언하는 보다 단순하고 빠르고 더러운 방법을 제공합니다.

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

이 표기법은 Dependency Injection의 "Inline Annotation(인라인 주석)"에서 확인할 수 있습니다.

모듈의 일부로 등록된 컨트롤러를 테스트하려면 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');
  });

});

이 컨트롤러 테스트 방법은 컨트롤러 컴포넌트 이해의 "컨트롤러 테스트"에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/13362921/globally-defined-angularjs-controllers-and-encapsulation