AngularJS 컨트롤러_AngularJS 사용에 대한 자세한 설명

Angularjs에서 컨트롤러의 역할은 뷰를 향상시키는 것입니다. 실제로 뷰의 범위에 추가 기능을 추가하는 데 사용되는 기능입니다. 범위 객체의 초기 상태를 설정하고 사용자 정의 동작을 추가합니다. .

페이지에 컨트롤러를 만들 때 Angularjs는 $scope를 생성하여 컨트롤러에 전달합니다. Angularjs는 자동으로 컨트롤러를 인스턴스화하므로 생성자만 작성하면 됩니다. 다음 예는 컨트롤러 초기화를 보여줍니다.

function my Controller($scope){
 $scope.msg="hello,world!"; 
}

위의 컨트롤러 생성 방법은 전역 네임스페이스를 오염시킵니다. 보다 합리적인 접근 방식은 다음과 같이 모듈을 생성한 다음 모듈에 컨트롤러를 생성하는 것입니다.

var myApp=angular.module("myApp",[]);
myApp.controller("myController",function($scope){
 $scope.msg="hello,world!";
})

내장된 명령 ng-click을 사용하여 버튼, 링크 및 기타 DOM 요소를 클릭 이벤트에 바인딩합니다. ng-click 지시문은 브라우저의 mouseup 이벤트를 DOM 요소에 설정된 이벤트 핸들러에 바인딩합니다(예를 들어 브라우저가 DOM 요소에서 click 이벤트를 트리거하면 함수가 호출됩니다). 이전 예와 유사하게 바인딩은 다음과 같습니다.

<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-click="add(1)" class="button">Add</button>
<a ng-click="subtract(1)" class="button alert">Subtract</a>
<h4>Current count: {{ counter }}</h4>
</div>

버튼과 링크는 내부 $scope의 작업에 바인딩됩니다. AngularJS는 요소를 클릭할 때 해당 메서드를 호출합니다. 호출할 함수를 설정할 때 매개변수(add(1))도 괄호 안에 전달됩니다.

app.controller('FirstController', function($scope) {
$scope.counter = 0;
$scope.add = function(amount) { $scope.counter += amount; };
$scope.subtract = function(amount) { $scope.counter -= amount; };
});

Angularjs와 다른 프레임워크의 가장 큰 차이점은 컨트롤러가 데이터 모델 저장 이외의 DOM 작업, 형식 지정 또는 데이터 작업 및 상태 유지 관리 작업을 수행하는 데 적합하지 않다는 것입니다. 이는 뷰와 $scope 사이의 브리지일 뿐입니다. .

컨트롤러 중첩(범위에 범위 포함)

AngularJS 애플리케이션의 모든 부분은 렌더링되는 컨텍스트에 관계없이 상위 범위를 갖습니다. ng-app이 있는 수준의 경우 상위 범위는 $rootScope입니다.

기본적으로 AngularJS는 현재 범위에서 속성을 찾을 수 없으면 상위 범위에서 속성을 찾습니다. AngularJS가 해당 속성을 찾을 수 없으면 $rootScope에 도달할 때까지 상위 범위를 따라 위쪽으로 검색합니다. $rootScope에서 찾을 수 없으면 프로그램은 계속 실행되지만 보기는 업데이트되지 않습니다.

예시를 통해 이 동작을 살펴보겠습니다. 사용자 개체가 포함된 ParentController를 만든 다음 이 개체를 참조하는 ChildController를 만듭니다.

app.controller('ParentController', function($scope) {
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});

ChildController를 ParentController 안에 배치하면 ChildController의 $scope 개체의 상위 범위는 ParentController의 $scope 개체가 됩니다. 프로토타입 상속 메커니즘에 따라 하위 범위에서 ParentController의 $scope 개체에 액세스할 수 있습니다.

<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>

위 내용은 이 글의 전체 내용입니다. 여러분의 학습에 도움이 되고 AngularJS 컨트롤러에 익숙해지는 데 도움이 되기를 바랍니다.