Angular Controller as Syntax 및 vm 변수 탐색
종종 개발자들이 "'controller as' 구문은 무엇이며 컨트롤러 생성의 $scope 객체 접근 방식과 어떻게 다릅니까?"라고 묻는 것을 듣습니다. 이 게시물에서는 controller as 구문에 대해 배우고 이를 컨트롤러 생성의 $scope 객체 접근 방식과 비교합니다.
종종 개발자들이 "'controller as' 구문은 무엇이며 컨트롤러 생성의 $scope 객체 접근 방식과 어떻게 다릅니까?"라고 묻는 것을 듣습니다. 이 게시물에서는 controller as 구문에 대해 배우고 이를 컨트롤러 생성의 $scope 객체 접근 방식과 비교합니다.
AngularJS 1.2에서는 "controller as" 구문이 도입되어 컨트롤러 코드 생성을 더 읽기 쉽게 만들었습니다. 아래에서 두 가지 접근 방식이 모두 작동하는 것을 살펴보겠습니다.
$scope 객체를 사용하여 컨트롤러 만들기
일반적으로 아래 목록과 같이 $scope 객체를 사용하여 컨트롤러를 만듭니다.
myApp.controller("AddController", function ($scope) { $scope.number1; $scope.number2; $scope.result; $scope.add = function () { $scope.result = $scope.number1 + $scope.number2; } });
위에서 우리는 서로 통신하는 $scope 객체 컨트롤러와 뷰를 사용하여 세 개의 변수와 하나의 동작으로 AddController를 만들고 있습니다. $scope 객체는 데이터와 동작을 뷰에 전달하는 데 사용됩니다. 뷰와 컨트롤러를 함께 붙입니다.
기본적으로 $scope 개체는 다음 작업을 수행합니다.
- 컨트롤러에서 뷰로 데이터 전달
- 컨트롤러에서 뷰로 동작 전달하기
- 컨트롤러와 뷰를 함께 붙입니다.
- $scope 객체는 뷰가 변경될 때 수정되고 뷰는 $scope 객체의 속성이 변경될 때 수정됩니다
우리는 $scope 객체에 속성을 첨부하여 데이터와 동작을 뷰에 전달합니다. 컨트롤러에서 $scope 객체를 사용하기 전에 컨트롤러 함수에 종속성으로 전달해야 합니다.
"Controller as" 구문 및 vm 사용
아래 목록과 같이 컨트롤러를 구문으로 사용하고 vm 변수를 사용하여 위의 컨트롤러를 다시 작성할 수 있습니다.
myApp.controller("AddVMController", function () { var vm = this; vm.number1 = undefined; vm.number2=undefined; vm.result =undefined; vm.add = function () { vm.result = vm.number1 + vm.number2; } });
본질적으로 우리는 이것을 변수 vm에 할당한 다음 속성과 동작을 여기에 연결합니다. 보기에서 controller를 구문으로 사용하여 AddVmController에 액세스할 수 있습니다. 이는 아래 목록에 나와 있습니다.
<div ng-controller="AddVMController as vm"> <input ng-model="vm.number1" type="number" /> <input ng-model="vm.number2" type="number" /> <button class="btn btn-default" ng-click="vm.add()">Add</button> <h3>{{vm.result}}</h3> </div>
물론 컨트롤러에서 "vm"이 아닌 다른 이름을 구문으로 사용할 수 있습니다. 내부적으로 AngularJS는 $scope 객체를 생성하고 속성과 동작을 연결합니다. 그러나 컨트롤러를 구문으로 사용하면 코드가 컨트롤러에서 매우 명확하고 별칭 이름만 뷰에 표시됩니다.
다음은 컨트롤러를 구문으로 사용하는 몇 가지 단계입니다.
- 객체 없이 제어기$scope 만듭니다.
- 이것을 지역 변수에 할당합니다. 나는 vm 으로 변수 이름을 선호했으며 원하는 이름을 선택할 수 있습니다.
- vm 변수에 데이터와 동작을 첨부합니다.
- 보기에서 controller를 구문으로 사용하여 컨트롤러에 별칭을 지정합니다.
- 별칭에 이름을 지정할 수 있습니다. 중첩 된 컨트롤러로 작업하지 않는 한 vm을 사용하는 것을 선호합니다.
컨트롤러를 만들 때 $scope 개체 접근 방식이나 컨트롤러를 구문으로 사용하는 데에는 직접적인 장점이나 단점이 없습니다. 그러나 컨트롤러를 구문으로 사용하면 컨트롤러의 JavaScript 코드를 더 읽기 쉽게 만들고 이 컨텍스트와 관련된 문제를 방지할 수 있습니다.
$scope 객체 접근 방식의 중첩 컨트롤러
아래 목록과 같이 두 개의 컨트롤러가 있습니다.
myApp.controller("ParentController", function ($scope) { $scope.name = "DJ"; $scope.age = 32; }); myApp.controller("ChildController", function ($scope) { $scope.age = 22; $scope.country = "India"; });
"age" 속성은 두 컨트롤러 내부에 있으며, 뷰에서 이러한 두 컨트롤러는 아래 목록과 같이 중첩될 수 있습니다.
<div ng-controller="ParentController"> <h2>Name :{{name}}</h2> <h3>Age:{{age}}</h3> <div ng-controller="ChildController"> <h2>Parent Name :{{name}}</h2> <h3>Parent Age:{{$parent.age}}</h3> <h3>Child Age:{{age}}</h3> <h3>Country:{{country}}</h3> </div> </div>
보시다시피 부모 컨트롤러의 age 속성에 액세스하기 위해 $parent.age를 사용하고 있습니다. 여기서는 문맥 분리가 명확하지 않습니다. 그러나 컨트롤러를 구문으로 사용하면 보다 우아한 방식으로 중첩된 컨트롤러로 작업할 수 있습니다. 아래 목록과 같이 컨트롤러가 있다고 가정해 보겠습니다.
myApp.controller("ParentVMController", function () { var vm = this; vm.name = "DJ"; vm.age = 32; }); myApp.controller("ChildVMController", function () { var vm = this; vm.age = 22; vm.country = "India"; });
보기에서 이러한 두 컨트롤러는 아래 목록에 표시된 대로 중첩될 수 있습니다.
<div ng-controller="ParentVMController as parent"> <h2>Name :{{parent.name}}</h2> <h3>Age:{{parent.age}}</h3> <div ng-controller="ChildVMController as child"> <h2>Parent Name :{{parent.name}}</h2> <h3>Parent Age:{{parent.age}}</h3> <h3>Child Age:{{child.age}}</h3> <h3>Country:{{child.country}}</h3> </div> </div>
컨트롤러 구문에는 더 읽기 쉬운 코드가 있으며 $parent 구문을 사용하는 대신 부모 컨트롤러의 별칭 이름을 사용하여 부모 속성에 액세스할 수 있습니다.
나는 당신이 컨트롤러를 구문으로 사용할지 아니면 $scope 객체로 사용할지 여부는 순전히 당신의 선택이라고 말하면서이 게시물을 마무리 할 것입니다. 어느 쪽에도 큰 장점이나 단점은 없으며, 단순히 컨텍스트를 제어 할 수있는 컨트롤러 구문이 뷰의 중첩 된 컨트롤러에서 명확하게 분리되어 있기 때문에 작업하기가 조금 더 쉽다는 것입니다.
이 게시물이 유용하기를 바랍니다 – 읽어 주셔서 감사하고 즐거운 코딩을 해주셔서 감사합니다!