AngularJs "controller as" 구문 - 설명?
나는 Angular에서 새로운 구문에 대해 읽었다.JS에 대해서controller as xxx
" "
InvoiceController as invoiceAngular에게 컨트롤러를 인스턴스화하여 현재 스코프의 가변 청구서에 저장하도록 지시합니다.
시각화:
.$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을 읽으면 모든 속성이 어디서 오는지 알 수 있습니다.
도트 규칙 문제 중 일부를 방지할 수도 있습니다.
예를 들어 컨트롤러가 2개 있고 이름이 '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클래스와 상속을 합니다.
이 문제를 부분적으로 해결하는 $scope 상속이 있지만, 일부 사람들은 코드를 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 객체 컨트롤러와 뷰를 사용하여 3개의 변수와 1개의 동작으로 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에 할당한 후 속성과 동작을 연결합니다.뷰에서는 컨트롤러를 구문으로 사용하여 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"이 아닌 다른 이름을 구문으로 사용할 수 있습니다.후드 아래, 각진JS는 $scope 객체를 만들고 속성과 동작을 부가합니다.단, 컨트롤러를 구문으로서 사용함으로써 컨트롤러에서는 코드가 매우 깨끗해지고 뷰에는 에일리어스 이름만 표시됩니다.
컨트롤러를 구문으로서 사용하는 순서는 다음과 같습니다.
$scope 객체 없이 컨트롤러를 만듭니다.
이 값을 로컬 변수에 할당합니다.저는 변수 이름을 vm으로 선호합니다. 원하는 이름을 선택할 수 있습니다.
데이터와 동작을 VM 변수에 연결합니다.
뷰에서 컨트롤러를 구문으로 사용하여 컨트롤러에 에일리어스를 지정합니다.
에일리어스에 임의의 이름을 붙일 수 있습니다.중첩된 컨트롤러를 사용하지 않는 한 VM을 사용하는 것이 좋습니다.
컨트롤러를 작성할 때 $scope 객체 접근법 또는 컨트롤러를 구문으로서 사용하는 것에 대한 직접적인 장점과 단점은 없습니다.단, 컨트롤러를 구문으로서 사용하는 것은 순전히 선택의 문제입니다.컨트롤러의 JavaScript 코드를 보다 읽기 쉽게 하고 이 컨텍스트와 관련된 문제를 방지합니다.
$scope 객체 접근 방식으로 중첩된 컨트롤러
아래 목록과 같이 2개의 컨트롤러가 있습니다.
myApp.controller("ParentController", function ($scope) {
$scope.name = "DJ";
$scope.age = 32;
});
myApp.controller("ChildController", function ($scope) {
$scope.age = 22;
$scope.country = "India";
});
속성 "에이징"은 양쪽 컨트롤러 내부에 있으며 아래 목록에 표시된 것처럼 이들 2개의 컨트롤러를 네스트할 수 있습니다.
<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>
보시는 바와 같이 부모 컨트롤러의 에이징 속성에 액세스하기 위해 $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";
});
이 2개의 컨트롤러는 아래 목록과 같이 네스트할 수 있습니다.
<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 를 참조해 주세요.
제가 읽은 바로는 Angular 2.0에서는 $scope가 삭제되거나 적어도 $scope의 사용법이 삭제됩니다.2.0 릴리스가 가까워지면 컨트롤러를 사용하는 것이 좋습니다.
자세한 내용은 비디오 링크를 참조하십시오.
언급URL : https://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification
'source' 카테고리의 다른 글
| 추적되지 않은 파일 목록에 .gitignore가 표시되지 않도록 하려면 어떻게 해야 합니까? (0) | 2023.04.09 |
|---|---|
| 구텐베르크의 "문서" 아래에 새 패널을 추가하는 방법 (0) | 2023.04.04 |
| 일반적인 브라우저에서 동시에 허용되는 AJAX(XmlHttpRequest) 요청 수는 몇 개입니까? (0) | 2023.04.04 |
| $_POST에서 읽을 수 없는 Axios 게시 매개 변수 (0) | 2023.04.04 |
| 표준 Scala 클래스를 사용하여 Scala에서 JSON을 해석하려면 어떻게 해야 합니까? (0) | 2023.04.04 |