AngularJS의 "controller as" 구문 이해

소개

AngularJS는 컨트롤러를 정의하기 위한 새로운 구문인 "controller as"를 도입했습니다. 그 목적에 대한 질문입니다. 이 글의 목표는 이 구문의 근거와 이점을 명확히 하는 것입니다.

Controller as 구문

"controller as" 구문을 사용하면 컨트롤러를 인스턴스화하고 현재의 변수에 할당할 수 있습니다. 범위. 예:

controller('InvoiceController as invoice')

이 코드는 Angular에게 InvoiceController의 인스턴스를 생성하고 이를 현재 범위 내의 송장 변수에 저장하도록 지시합니다.

컨트롤러에서 $scope 제거

"controller as" 구문의 눈에 띄는 차이점 중 하나는 컨트롤러 정의에서 $scope 매개변수를 제거한다는 것입니다. 이를 통해 더 깔끔하고 간결한 컨트롤러가 가능해집니다.

// With $scope
function InvoiceController($scope) {
  // Do something with $scope.qty
}

// With controller as
function InvoiceController() {
  // Do something with this.qty
}

뷰에 별칭 할당

컨트롤러에서 $scope를 제거하면 코드가 단순화되지만 뷰에 별칭을 지정해야 합니다.

// With $scope


// With controller as

컨트롤러의 용도 구문

"controller as" 구문은 주로 다음과 같은 이유로 도입되었습니다.

• $scope 제거: 일부 개발자는 속성 소스를 난독화한다고 믿고 $scope 구문을 피하는 것을 선호합니다.
• 속성 출처의 명확성 : 뷰에서 별칭을 사용하면 어떤 속성이 어떤 컨트롤러에 속하는지 명확해집니다. 이는 컨트롤러를 중첩할 때 특히 유용합니다.
• 점 규칙 문제 방지: "controller as" 구문은 속성에 액세스하기 어렵게 만들 수 있는 AngularJS의 "점 규칙" 문제를 피하는 데 도움이 됩니다. 상위 컨트롤러에서. 컨트롤러 속성에 대한 명확하고 계층적인 액세스를 허용합니다.