AngularJS에서 `$scope`란 무엇인가요? 예제를 통해 알아보세요.

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

⚡ 스마트 요약

AngularJS의 `$Scope`는 컨트롤러와 뷰를 연결하는 내장 객체입니다. 이 페이지에서는 스코프 생성, 동작 함수, 부모-자식 계층 구조, `$rootScope`와의 차이점, 그리고 다이제스트 사이클이 바인딩을 갱신하는 방식에 대해 설명합니다.

  • 🔗 바인딩 역할: `$scope`는 컨트롤러의 멤버 변수를 뷰로 전달하므로 템플릿은 DOM을 직접 건드리지 않고 데이터를 렌더링할 수 있습니다.
  • ⚙️ 동작 기능: 뷰가 클릭, 입력 변경 또는 기타 사용자 이벤트에 반응해야 할 때 함수를 $scope에 연결합니다.
  • 🌳 범위 계층 구조: ng-controller 및 ng-repeat와 같은 지시어는 애플리케이션의 DOM 트리를 반영하는 하위 스코프를 생성합니다.
  • 🌍 $rootScope 도달 범위: 애플리케이션당 하나의 $rootScope가 존재하며, 모든 하위 스코프가 읽을 수 있는 전역 객체처럼 동작합니다.
  • 🔍 소화 주기: `$watch`는 리스너를 등록하고, `$apply`는 AngularJS 실행 컨텍스트에 진입하며, `$digest`는 모델이 안정화될 때까지 값을 비교합니다.
  • 🚀 성과 습관: 감시 표현식을 간결하게 유지하고, 표현식 내부에서 DOM 접근을 피하며, 더 이상 필요하지 않은 스코프에 대해서는 `$destroy`를 호출하세요.
자세히 보기

AngularJS에서 $Scope란 무엇인가요?

AngularJS의 $scope란 무엇입니까?

AngularJS의 $scope 기본적으로 "컨트롤러"와 "뷰"를 바인딩하는 내장 개체입니다. 뷰에서 액세스할 수 있는 컨트롤러 내의 범위에서 멤버 변수를 정의할 수 있습니다.

모든 컨트롤러는 AngularJS와 애플리케이션은 의존성 주입을 통해 자체적인 `$scope` 인스턴스를 받습니다. 해당 객체에 연결하는 모든 내용은 컨트롤러가 관리하는 템플릿에서 볼 수 있게 되므로, `$scope`는 컨트롤러와 템플릿 사이에 존재하는 공유 데이터 모델 역할을 합니다. Java스크립트 로직과 HTML 마크업.

아래 예를 고려하십시오.

AngularJS의 $scope

angular.module('app',[]).controller('HelloWorldCtrl',
	function($scope)
	{
		$scope.message = "Hello World"
	});

Code 설명 :

  1. 모듈 이름은 "app"입니다.
  2. 컨트롤러의 이름은 “HelloWorldCtrl”입니다.
  3. Scope 객체는 컨트롤러에서 뷰로 정보를 전달하는 데 사용되는 기본 객체입니다.
  4. 범위 개체에 추가된 멤버 변수

⚠️ 구문 오류 경고: The .controller() 이 메서드는 컨트롤러 이름과 팩토리 함수라는 두 개의 인수를 받으므로 두 인수 사이에 쉼표가 필요합니다. 'HelloWorldCtrl' function($scope)쉼표를 생략하면 오류가 발생합니다. Uncaught SyntaxError AngularJS가 부트스트랩되기 전.

컨트롤러 하나와 뷰 하나만으로는 전체 그림의 절반밖에 되지 않습니다. 실제 애플리케이션은 컨트롤러를 중첩하고, 목록을 반복하며, 위젯을 재사용하므로 여러 스코프가 동시에 존재합니다.

AngularJS에서 스코프 계층 구조와 상속은 어떻게 작동할까요?

모든 AngularJS 애플리케이션은 정확히 하나의 루트 스코프를 가지며, 여러 개의 자식 스코프를 가질 수 있습니다. 디렉티브는 이러한 자식 스코프를 생성하고, 해당 디렉티브가 장식하는 DOM 요소에 연결하여 스코프 트리가 렌더링된 페이지의 구조를 반영하도록 합니다.

AngularJS가 다음과 같은 표현식을 평가할 때 {{siteName}}먼저 해당 요소가 속한 스코프에서 해당 속성을 찾습니다. 속성이 없으면 부모 스코프에서 찾기를 시작하고 루트 스코프에 도달할 때까지 계속해서 위로 올라갑니다. Java스크립트 개발자들은 이러한 동작을 프로토타입 상속이라고 알고 있으며, 자식 스코프는 바로 그런 방식으로 부모 스코프로부터 상속받습니다.

아래 예제는 컨트롤러 하나를 다른 컨트롤러 안에 중첩시켜 상속이 어떻게 이루어지는지 보여줍니다.

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code 설명 :

  1. ParentCtrl 정의 siteName 그 자체의 범위 내에서.
  2. ChildCtrl 결코 정의하지 않는다 siteName하지만 내부 div는 여전히 출력합니다. Guru99 조회 과정이 상위 범위까지 올라가기 때문입니다.
  3. lesson 해당 요소는 자식 영역에서만 존재하므로 부모 div는 읽을 수 없습니다.

어떤 지시문이 새로운 범위를 생성합니까?

  • ng-컨트롤러: 해당 요소가 배치된 위치에 대한 하위 범위를 생성합니다.
  • ng-repeat: 반복마다 하나의 하위 스코프를 생성하므로 각 행은 동일한 표현식에 대해 서로 다른 값을 가질 수 있습니다.
  • 사용자 지정 지침: 어린이 검진을 요청할 수도 있습니다. 격리 의도적으로 부모 클래스로부터 상속을 받지 않는 스코프입니다.
  • 구성 요소 지시문: 등록된 모든 것 .component() 헬퍼는 항상 격리된 범위를 받습니다.

자식 스코프는 위쪽으로 읽기 때문에 개발자들은 종종 최상위 스코프가 어디에 있는지 궁금해합니다. 최상위 객체를 $rootScope라고 합니다.

$scope와 $rootScope의 차이점은 무엇일까요?

AngularJS $rootScope `$rootScope`는 애플리케이션 전체의 범위를 나타냅니다. 애플리케이션은 하나의 `$rootScope`만 가질 수 있으며, 이는 전역 변수처럼 사용됩니다. 모든 `$scope`는 하위 범위이며, `$rootScope`는 최상위 부모 범위입니다. 아래 표는 두 객체를 비교합니다.

아래 $스코프 $rootScope
애플리케이션당 인스턴스 수 컨트롤러 또는 범위 생성 지시문당 하나씩, 여러 개 정확히 하나
에 의해 생성 ng-controller 및 ng-repeat와 같은 지시문 애플리케이션 부트스트랩 중 인젝터
시정 그 고유 요소와 모든 후손 애플리케이션의 모든 범위
일반적인 사용 하나의 뷰 또는 하나의 리스트 행에 대한 데이터 및 동작 로그인한 사용자와 같은 애플리케이션 전체 값
주요 위험 해당 분기 외부에서는 값에 접근할 수 없게 됩니다. 이름 충돌 및 전역 변수와 같은 숨겨진 결합

`$rootScope`는 신중하게 사용해야 합니다. 해당 위치에 저장된 값은 애플리케이션 전체에 걸쳐 유지되며 어디에서든 읽을 수 있으므로, 전역 상태 정보는 공유 서비스에 저장하는 것이 일반적으로 더 안전합니다. $rootScope 참조 전체 API 목록을 보여줍니다.

데이터가 어디에 있는지 아는 것은 업무의 절반입니다. 나머지 절반은 사용자가 어떤 작업을 수행했을 때 시스템이 어떻게 반응해야 하는지를 가르치는 것입니다.

놓치지 마세요 :

AngularJS에서 동작 설정 또는 추가하기

이벤트에 반응하거나 뷰에서 일종의 계산/처리를 실행하려면 범위에 동작을 제공해야 합니다.

뷰에 의해 트리거될 수 있는 특정 이벤트에 응답하기 위해 범위 개체에 동작이 추가됩니다. 동작이 컨트롤러에 정의되면 뷰에서 액세스할 수 있습니다.

이를 달성할 수 있는 방법의 예를 살펴보겠습니다.

동작 설정 또는 추가

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

Code 설명 :

  1. 우리는 "fullName"이라는 동작을 생성하고 있습니다. 이 동작은 2개의 매개변수(firstName,lastname)를 허용하는 함수입니다.
  2. 그런 다음 동작은 이러한 두 매개변수의 연결을 반환합니다.
  3. 뷰에서 동작을 호출하고 " 2개의 값을 전달합니다.Guru"와 "99"는 동작에 매개변수로 전달됩니다.

명령이 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

동작 설정 또는 추가

브라우저에서는 두 값의 연결이 된 결과를 볼 수 있습니다. Guru & 99는 행동에 전달되었습니다. 제어 장치.

위와 같은 바인딩은 자동으로 새로 고쳐지며, 애플리케이션 규모가 커지기 전에 이러한 새로 고침이 이루어지는 메커니즘을 이해하는 것이 중요합니다.

스코프 워처와 다이제스트 주기가 중요한 이유

AngularJS는 변경 이벤트가 아닌 변경 사항 확인을 통해 뷰를 스코프에 맞춰 유지합니다. 세 가지 스코프 API가 이 프로세스를 지원합니다.

  • $watch: 표현식에 대한 리스너를 등록합니다. 보간법(예: ...) {{fullName}} 템플릿 연결 중에 감시자를 등록해 드립니다.
  • 적용: AngularJS 실행 컨텍스트에 진입하여 코드를 평가한 다음 다이제스트를 트리거합니다. 내장 디렉티브에서 이미 호출되므로 사용자 지정 이벤트 콜백 또는 타사 라이브러리 콜백 내에서만 필요합니다.
  • $다이제스트: $rootScope 및 그 하위 요소에 있는 모든 감시자를 순회하며 현재 값을 이전 값과 비교하고, 모델이 더 이상 변경되지 않을 때까지 이 과정을 반복합니다.

다이제스트는 여러 번 실행될 수 있으므로 감시 표현식은 비용이 저렴해야 합니다. DOM을 읽는 것은 다이제스트를 읽는 것보다 훨씬 느리기 때문에 감시 표현식 내에서 DOM에 접근하는 것을 피해야 합니다. Java스크립트 속성.

감시 심도 또한 비용에 영향을 미칩니다. 기준점을 이용한 감시는 가장 빠르지만, 전체 값이 교체되었을 때만 감지할 수 있습니다. $watchCollection 배열이나 객체 내부에서 항목이 추가, 제거 또는 순서가 변경되는 것을 감지합니다. 값으로 감시하는 방식은 매 다이제스트마다 중첩 구조를 순회하므로 가장 비용이 많이 드는 옵션이며, 마지막에 사용하는 것이 좋습니다.

자주 묻는 질문

격리된 범위는 부모로부터 프로토타입을 상속받지 않습니다. `.component()` 헬퍼를 사용하여 빌드된 컴포넌트 디렉티브는 항상 격리된 범위를 상속받으므로 재사용 가능한 위젯이 주변 컨트롤러와 독립적으로 유지되고 부모 속성을 실수로 읽는 것을 방지합니다.

`$emit`은 스코프 이벤트를 상위 스코프를 거쳐 `$rootScope`로 전송하고, `$broadcast`는 하위 스코프의 모든 자식 스코프에 전송합니다. 두 메서드 모두 `$on`을 통해 수신됩니다. `$broadcast`는 모든 하위 스코프를 방문하므로 신중하게 사용해야 합니다.

자식 스코프가 더 이상 필요하지 않으면 `scope.$destroy()`를 호출하세요. 이렇게 하면 해당 스코프로의 다이제스트 전파가 중지되고 가비지 컬렉터가 모델을 회수할 수 있습니다. 또한 `$watch`가 반환하는 함수를 호출하여 수동 감시자 등록을 해제할 수도 있습니다.

조수들(예: ...) GitHub 부조종사 스코프 보일러플레이트를 빠르게 생성하지만, 컨트롤러 등록에 쉼표가 누락되는 등의 오류가 여전히 발생합니다. 생성된 모든 코드 조각을 공식 코드와 비교하여 확인하십시오. AngularJS 스코프 문서.

AI 어시스턴트는 `$scope` 속성을 컴포넌트 클래스 필드에 매핑하고 `$watch` 로직을 시그널 또는 RxJS 스트림으로 재작성합니다. 공식 도구와 함께 사용하세요. 모난 생성된 변환 과정에서 상속된 범위 조회가 누락되는 경우가 많으므로 문서를 작성하고 단위 테스트를 실행하십시오.

이 게시물을 요약하면 다음과 같습니다.