AngularJs“컨트롤러”구문-설명?
나는 새로운 구문에 대해 읽어 에 대해 AngularJS와에서controller as xxx
이 구문
InvoiceController as invoice은 Angular에게 컨트롤러를 인스턴스화하고 현재 범위의 변수 송장에 저장하도록 지시 합니다 .
전국 :
Ok, 컨트롤러 $scope에 유료 변수 가 컨트롤러에서 코드가 훨씬 깨끗합니다.
그러나
뷰에서 다른 신호를 지정해야 합니다.
그래서 지금까지 나는 할 수 있었다 :
<input type="number" ng-model="qty" />
....controller('InvoiceController', function($scope) {
// do something with $scope.qty <--notice
그리고 지금 할 수 있습니다.
<input type="number" ng-model="invoic.qty" /> <-- notice
....controller('InvoiceController', function() {
// do something with this.qty <--notice
질문
그것을하는 목표는 무엇입니까? 한 장소에서 제거하고 다른 장소에 추가?
내가 잃어버린 것을 희롱합니다.
당신에게 몇 가지가 있습니다.
어떤 사람들은 $scope구문이 마음에 들지 언어 (이유를 묻지 문장). 그들은 그냥 사용할 수 this있습니다. 그것은 목표 중 하나였습니다.
속성의 출처를 명확하게하는 것도 유용합니다.
컨트롤러를 중첩 할 수있는 HTML을 읽을 때 모든 속성이 어디에서 오는지 분명합니다.
일부 도트 규칙 문제를 피할 수도 있습니다.
예를 들어 이름이 'name'인 두 개의 컨트롤러가 다음과 같이 할 수 있습니다.
<body ng-controller="ParentCtrl">
<input ng-model="name" /> {{name}}
<div ng-controller="ChildCtrl">
<input ng-model="name" /> {{name}} - {{$parent.name}}
</div>
</body>
부모와 자식 모두가 있습니다. 문제는 없습니다. 그러나 $parent자식 컨트롤러에서 섀도 잉했기 때문에 부모의 이름을 보려면 사용해야 합니다. 방대한 HTML 코드에서 $parent문제가 될 수 있으므로 해당 이름의 출처를 확인합니다.
로에게 controller as당신이 할 수 있습니다 :
<body ng-controller="ParentCtrl as parent">
<input ng-model="parent.name" /> {{parent.name}}
<div ng-controller="ChildCtrl as child">
<input ng-model="child.name" /> {{child.name}} - {{parent.name}}
</div>
</body>
같은 예이지만 읽는 것이 훨씬 더 명확합니다.
controller as내가 본 구문 의 주요 장점 은 단지 $ scope-decorating 함수하고 아니라 클래스로 컨트롤러로 작업을 수행하고있는 것입니다. 컨트롤러와 매우 많은 유사한 기능 현관이있는 상황이 종종 발생하며 추론 분명한 [해석] BaseController클래스 를 만들고 상속하는을 구석으로입니다.
이 문제를 부분적으로 해결하는 $ 범위가 더 OOP 방식으로 코드를 작성하는 것을 선호합니다. 제 생각에 코드를 쉽게 추론하고 테스트 할 수 있습니다.
여기에 바이올린이 있습니다 : http://jsfiddle.net/HB7LU/5796/
중첩 된 범위가있을 때 하나의 특별한 이점이 분명하다고 생각합니다. 이제 속성 참조의 범위를 정확히 알 수 있습니다.
구문을 $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 객체는 다음 작업을 수행합니다.
컨트롤러에서 뷰로 데이터 전달
컨트롤러에서보기로 동작 전달
컨트롤러를 붙이고 함께보기
뷰가 변경되면 $ 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에 할당 한 다음 속성과 동작을 첨부합니다. 뷰에서 컨트롤러를 구문으로 사용하여 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 변수에 데이터 및 동작을 연결합니다.
보기에서 컨트롤러를 구문으로 사용하여 컨트롤러에 별칭을 제공합니다.
별칭에 모든 이름을 지정할 수 있습니다. 중첩 컨트롤러로 작업하지 않는 한 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 객체로 사용할 것인지는 순전히 귀하의 선택이라고 말하면서이 게시물을 마무리하겠습니다. 뷰에 중첩 된 컨트롤러가 명확하게 분리되어 있으므로 컨텍스트에서 제어 할 수있는 구문으로서의 컨트롤러가 작업하기가 조금 더 쉽다는 점에서 두 가지 모두에 큰 장점이나 단점이 없습니다.
메서드 / 속성이 범위 개체가 아닌 컨트롤러 인스턴스와 직접 연결되어 있기 때문에 더 인 API가 주요 이점입니다. 기본적으로 이전 방식에서는 컨트롤러가 스코프를 작성하기 위해 장식물이 있습니다.
여기에 더 많은 정보가 있습니다 : http://www.syntaxsuccess.com/viewarticle/551798f20c5f3f3c0ffcc9ff
내가 읽은 내용에서 $ scope는 Angular 2.0에서 제거하는 방식으로 $ scope의 사용을 보는 방식으로 제거됩니다. 2.0 릴리스가 가까워짐에 따라 컨트롤러 사용을 시작하는 것이 좋습니다.
비디오 링크는 여기 에 대한 자세한 설명은.
참고 URL : https://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification
'IT' 카테고리의 다른 글
| Backbone.js : Backbone Collection에서 모델의 제작을 얻는 방법? (0) | 2020.07.16 |
|---|---|
| Chrome 개발자 도구에서 자동 확장하는 방법이 있습니까? (0) | 2020.07.16 |
| Docker 대부분과 저장소의 차이점 (0) | 2020.07.16 |
| PHP 세션은 어떻게 작동합니까? (0) | 2020.07.16 |
| 경고 응답 본문의 내용 길이가 없습니다. (0) | 2020.07.16 |