AngularJS 프레임워크에서 $scope의 역할과 수명주기에 대한 심층 분석

AngularJS 프레임워크에서 $scope의 역할과 수명주기에 대한 심층 분석_AngularJS

WBOY

풀어 주다： 2016-05-16 15:12:07

원래의

1374명이 탐색했습니다.

$scope는 Angular 앱 전체에서 사용됩니다. 데이터 모델과 연관되어 있으며 표현식 실행을 위한 컨텍스트이기도 합니다. $scope를 사용하면 범위 뷰를 기반으로 채널이 설정됩니다. 데이터가 수정되면 $scope가 즉시 업데이트됩니다.

뷰가 즉시 다시 렌더링됩니다.

$scope를 브리지로 사용하면 애플리케이션의 비즈니스 코드가 모두 컨트롤러에 포함될 수 있으며, 데이터는 컨트롤러의 $scope에 저장됩니다.

201635151546605.jpg (463×316)

$scope는 뷰(DOM 요소)를 컨트롤러에 연결하는 개체입니다. MVC 구조에서 이 $scope는 DOM 요소(및 그 하위 항목)에 바인딩된 실행 컨텍스트를 제공하는 모델이 됩니다.

조금 복잡하게 들리지만 $scope는 실제로 컨트롤러와 뷰 모두에서 액세스할 수 있는 JavaScript 개체이므로 이를 사용하여 둘 사이에 정보를 전달할 수 있습니다. 이 $scope 객체에는 뷰에서 실행될 데이터와 함수를 모두 저장합니다.

모든 Angular 애플리케이션에는 $rootScope가 있습니다. 이 $rootScope는 ng-app 지시어 속성을 포함하는 DOM 요소에 해당하는 최상위 범위입니다.

페이지에 $scope가 명시적으로 설정되지 않은 경우 Angular는 여기에 데이터와 함수를 바인딩합니다. 첫 번째 부분의 예는 이를 사용하여 성공적으로 실행됩니다.

이 예에서는 $rootScope를 사용합니다. main.js 파일에서 이 범위에 이름 속성을 추가합니다. app.run 함수에서 이 함수를 실행함으로써 애플리케이션의 다른 부분보다 먼저 실행되도록 보장합니다. app.run 함수를 Angular 애플리케이션의 주요 메소드로 생각할 수 있습니다.

app.run(function($rootScope) {
 $rootScope.name = "Ari Lerner";
});

로그인 후 복사

이제 다음과 같이 템플릿 표현식 {{}}을 사용하여 뷰의 어느 곳에서나 이 이름 속성에 액세스할 수 있습니다.

{{ name }}

로그인 후 복사

$rootScope
Angular 애플리케이션이 시작되고 뷰가 생성되면 루트 ng-app 요소는 $rootScope에 바인딩됩니다. $rootScope는 모든 $scope의 최상위 개체이며 Angular에서 전역 범위 개체로 이해될 수 있습니다. 너무 많은 로직이나 변수를 첨부하는 것은 좋은 생각이 아니며, 이는 Javascript 전역 범위를 오염시키는 것과 같습니다.

$scope의 역할
$scope 객체는 일반 MVC 프레임워크에서 Model의 역할인 Angular에서 데이터 모델 역할을 합니다. 그러나 $scope는 처리 및 처리를 수행하지 않기 때문에 일반적인 의미의 데이터 모델과 완전히 동일하지는 않습니다. 데이터를 조작하여 뷰와 HTML 사이에 브리지를 구축하여 뷰와 컨트롤러 간의 친숙한 통신을 가능하게 했습니다.

기능과 기능을 더욱 체계적으로 나누어 보겠습니다.

데이터 모델의 변경 사항을 모니터링할 관찰자를 제공합니다.
데이터 모델 변경 사항을 전체 앱에 알릴 수 있습니다
비즈니스 기능과 데이터를 분리하기 위해 중첩 가능
표현식에 대한 컨텍스트 실행 환경 제공

Javascript에서 새 실행 컨텍스트를 생성하면 실제로 함수를 사용하여 새 로컬 컨텍스트가 생성됩니다. Angular에서는 하위 DOM 요소에 대한 새 범위를 생성하면 실제로 하위 DOM 요소에 대한 새 범위가 생성됩니다.

$scope 수명 주기
Angular에도 '이벤트'라는 개념이 있습니다. 예를 들어 ng-model에 바인딩된 입력 값이 변경되거나 ng-click 버튼을 클릭하면 Angular의 이벤트 루프가 시작되는 것이 매우 핵심입니다. 이는 이 기사의 주요 초점이 아니기 때문에 자세히 설명하지 않겠습니다. 관심이 있는 경우 여기에서 이벤트가 Angular 실행 컨텍스트에서 처리되고 $scope가 평가됩니다. 이 시점에서 이벤트 루프가 시작되고 Angular는 애플리케이션의 모든 객체를 모니터링하며 더티 값 확인 루프도 시작됩니다.

$scope의 수명 주기는 4단계로 구성됩니다.

1. 만들기

컨트롤러나 지시문이 생성되면 Angular는 $injector를 사용하여 새 범위를 생성한 다음 컨트롤러나 지시문이 실행될 때 범위를 해당 범위에 전달합니다.

2.링크

Angular가 시작되면 모든 $scope 객체가 뷰에 연결되거나 연결되며 $scope 객체를 생성하는 모든 함수도 Angular 컨텍스트가 변경될 때 실행되도록 등록됩니다. 함수 즉, Angular는 이벤트 루프를 시작할 때 이러한 함수를 사용합니다.

3. 업데이트

이벤트 루프가 실행되면 자체 더티 값 감지를 수행하기 시작합니다. 변경 사항이 감지되면 $scope에 지정된 콜백 함수가 트리거됩니다.

4. 파기

일반적으로 $scope가 뷰에 더 이상 필요하지 않으면 Angular는 이를 자동으로 정리합니다. 물론 $destroy() 함수를 통해 수동으로 정리할 수도 있습니다.

ng-컨트롤러

$scope 객체를 명시적으로 생성하려면 ng-controller 지시문 속성을 사용하여 DOM 요소에 컨트롤러 객체를 연결해야 합니다.

<div ng-controller="MyController">
 {{ person.name }}
</div>

로그인 후 복사

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。这个scope链是这样的：

201635151716443.png (253×188)

现在，MyController 给我们建立了一个可以从DOM元素内部直接访问的$scope 对象。下面我们在的这个$scope 里创建一个person对象，在main.js中：

app.controller('MyController', function($scope) {
 $scope.person = {
  name: "Ari Lerner"
 };
});

로그인 후 복사

现在我们可以在有ng-controller='MyController'属性的DOM元素的任何子元素里访问这个person 对象，因为它在$scope上。
除了一个例外，所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$rootScope 上。

唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们。

举个例子，假设我们有一个ParentController ，含有一个person 对象，又有一个ChildController 想要访问这个对象：

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

로그인 후 복사

当我们在view里把ChildController 绑定到ParentController 之下，在子元素里我们就能访问ParentController 创建的父scope的属性，像访问ChildController 自己的scope中的属性一样：

<div ng-controller="ParentController">
 <div ng-controller="ChildController">
  <input type="text" ng-model="person.name" placeholder="Name"></input>
  <a ng-click="sayHello()">Say hello</a>
 </div>
 {{ person }}
</div>

로그인 후 복사