내용으로 건너뛰기
Angular Controller as Syntax 및 vm 변수 탐색

Angular Controller as Syntax 및 vm 변수 탐색

종종 개발자들이 "'controller as' 구문은 무엇이며 컨트롤러 생성의 $scope 객체 접근 방식과 어떻게 다릅니까?"라고 묻는 것을 듣습니다. 이 게시물에서는 controller as 구문에 대해 배우고 이를 컨트롤러 생성의 $scope 객체 접근 방식과 비교합니다.

5min read

종종 개발자들이 "'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 개체는 다음 작업을 수행합니다.

  1. 컨트롤러에서 뷰로 데이터 전달
  2. 컨트롤러에서 뷰로 동작 전달하기
  3. 컨트롤러와 뷰를 함께 붙입니다.
  4. $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 객체를 생성하고 속성과 동작을 연결합니다. 그러나 컨트롤러를 구문으로 사용하면 코드가 컨트롤러에서 매우 명확하고 별칭 이름만 뷰에 표시됩니다.

다음은 컨트롤러를 구문으로 사용하는 몇 가지 단계입니다.

  1. 객체 없이 제어기$scope 만듭니다.
  2. 이것을 지역 변수에 할당합니다. 나는 vm 으로 변수 이름을 선호했으며 원하는 이름을 선택할 수 있습니다.
  3. vm 변수에 데이터와 동작을 첨부합니다.
  4. 보기에서 controller를 구문으로 사용하여 컨트롤러에 별칭을 지정합니다.
  5. 별칭에 이름을 지정할 수 있습니다. 중첩 된 컨트롤러로 작업하지 않는 한 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 객체로 사용할지 여부는 순전히 당신의 선택이라고 말하면서이 게시물을 마무리 할 것입니다. 어느 쪽에도 큰 장점이나 단점은 없으며, 단순히 컨텍스트를 제어 할 수있는 컨트롤러 구문이 뷰의 중첩 된 컨트롤러에서 명확하게 분리되어 있기 때문에 작업하기가 조금 더 쉽다는 것입니다.

이 게시물이 유용하기를 바랍니다 – 읽어 주셔서 감사하고 즐거운 코딩을 해주셔서 감사합니다!

데모 요청