[javascript] AngularJs “controller as”구문-설명?

출처

구문 및 VM을 $scope object사용하여 컨트롤러를 만드는 것과 “controller as”구문 및 VM을 사용하는 것의 차이점

$ 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에 할당하고 속성과 동작을 거기에 연결합니다. 뷰에서 컨트롤러를 구문으로 사용하여 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. 보기에서 컨트롤러를 구문으로 사용하여 컨트롤러에 별칭을 제공합니다.

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 객체로 사용할 것인지는 순전히 귀하의 선택이라고 말하면서이 게시물을 마무리하겠습니다. 뷰에 중첩 된 컨트롤러가 명확하게 구분되어 있으므로 컨텍스트에서 제어 할 수있는 구문으로서의 컨트롤러가 작업하기가 조금 더 쉽다는 점에서 두 가지 모두에 큰 장점이나 단점이 없습니다.

---

답변