$ scope와 $ rootScope의 차이점

Question 1

누구든지 $ scope와 $ rootScope의 차이점을 설명 할 수 있습니까?

나는 생각한다

$ 범위 :

이것을 사용하여 특정 페이지에서 특정 컨트롤러의 ng-model 속성을 얻을 수 있습니다.

$ rootScope

이것을 사용하여 모든 페이지에서 모든 컨트롤러의 모든 ng-model 속성을 가져올 수 있습니다.

이 올바른지? 아니면 다른 건?

Question 2

"$ rootScope"는 웹 페이지에서 생성 된 모든 "$ scope"각도 개체의 상위 개체입니다.

$ scope는로 생성 ng-controller되고 $ rootscope는 ng-app.

Question 3

주요 차이점은 객체에 할당 된 속성의 가용성입니다. 로 할당 된 속성 $scope은 정의 된 컨트롤러 외부에서 사용할 수 없지만로 할당 된 속성 은 $rootScope어디에서나 사용할 수 있습니다.

예 : 대체 당신이 아래의 예 경우 $rootScope에 $scope부서 속성이 두 번째의 첫 번째 컨트롤러에서 채워지지 않습니다

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>

스 니펫 확장

Question 4

Angular의 개발자 가이드 범위 에 따르면 :

각 Angular 응용 프로그램에는 정확히 하나의 루트 범위가 있지만 여러 하위 범위가있을 수 있습니다. 일부 지시문은 새 하위 범위를 생성하기 때문에 응용 프로그램은 여러 범위를 가질 수 있습니다 (어떤 지시문이 새 범위를 생성하는지 확인하려면 지시문 문서를 참조하십시오). 새 범위가 작성되면 상위 범위의 하위로 추가됩니다. 이렇게하면 연결된 DOM과 유사한 트리 구조가 생성됩니다.

컨트롤러와 지시문 모두 범위에 대한 참조가 있지만 서로에 대한 참조는 없습니다. 이 배열은 DOM뿐만 아니라 지시문으로부터 컨트롤러를 분리합니다. 이것은 컨트롤러가 불가지론 적으로 보이게하여 애플리케이션의 테스트 스토리를 크게 향상시키기 때문에 중요한 포인트입니다.

Question 5

$rootScope어떤 컨트롤러에 있든 전 세계적으로 사용할 수있는 반면 $scope현재 컨트롤러와 자식 만 사용할 수 있습니다.

Question 6

다른 방법으로 우리는 이것을 볼 수 있습니다. $rootScope글로벌이고 $scope로컬입니다. Controller페이지에 할당 될 때 $scope변수가이 컨트롤러에 바인딩되기 때문에 여기서 사용할 수 있습니다. 그러나 우리가 다른 컨트롤러 나 서비스를 통해 그 가치를 공유하고 싶을 때 $rootScope사용되고 있습니다 $rootScope.

이 두 단어를 어떻게 정의하는지에 대한 두 번째 질문이 맞습니다.

마지막으로 약간 벗어난 부분이 있으므로 $rootScope조심해서 사용하십시오 . 전역 변수를 사용하는 방식과 유사하게 디버깅이 어려울 수 있으며 실수로 타이머 내부 어딘가에서 전역 변수를 변경하거나 판독을 잘못하게 만들 수 있습니다.

Question 7

모든 애플리케이션에는 하나 이상의 단일 rootScope가 있으며 수명주기는 앱과 동일하며 모든 컨트롤러는 다른 사람과 공유되지 않는 자체 범위를 가질 수 있습니다.

이 기사를보십시오 :

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Question 8

범위에 대한 공식적인 심층 Angular 문서를 읽는 것이 좋습니다. '범위 계층'섹션에서 시작합니다.

https://docs.angularjs.org/guide/scope

기본적으로 $ rootScope와 $ scope는 모두 DOM의 특정 부분을 식별합니다.

각도 작업이 수행됩니다.
$ rootScope 또는 $ scope의 일부로 선언 된 변수를 사용할 수 있습니다.

$ rootScope에 속하는 모든 것은 Angular 앱에서 전역 적으로 사용할 수있는 반면 $ scope에 속하는 모든 것은 해당 범위가 적용되는 DOM 부분 내에서 사용할 수 있습니다.

$ rootScope는 Angular 앱의 루트 요소 인 DOM 요소 (따라서 $ rootScope라는 이름)에 적용됩니다. DOM의 요소에 ng-app 지시문을 추가하면 $ rootScope를 사용할 수있는 DOM의 루트 요소가됩니다. 즉, $ rootScope의 속성 등은 전체 Angular 응용 프로그램에서 사용할 수 있습니다.

Angular $ 범위 (및 모든 변수 및 작업)는 응용 프로그램 내 DOM의 특정 하위 집합에서 사용할 수 있습니다. 특히 특정 컨트롤러에 대한 $ scope는 특정 컨트롤러가 적용된 DOM 부분에서 사용할 수 있습니다 (ng-controller 지시문 사용). 컨트롤러가 적용된 DOM의 일부 내에서 적용되는 경우 ng-repeat와 같은 특정 지시문은 동일한 컨트롤러 내에서 기본 범위의 자식 범위를 만들 수 있지만 컨트롤러가 반드시 하나의 범위 만 포함하는 것은 아닙니다.

Angular 앱을 실행할 때 생성 된 HTML을 보면 Angular가 범위가 적용된 모든 요소 (루트 요소 포함)에 ng-scope 클래스를 추가하므로 범위를 '포함하는'DOM 요소를 쉽게 확인할 수 있습니다. $ rootScope가있는 앱).

그건 그렇고, $ scope 및 $ rootScope 시작 부분의 '$'기호는 Angular가 예약 한 항목에 대한 Angular의 식별자입니다.

모듈과 컨트롤러간에 변수 등을 공유하기 위해 $ rootScope를 사용하는 것은 일반적으로 모범 사례로 간주되지 않습니다. JavaScript 개발자는 변수를 공유하여 전역 범위의 '오염'을 피하는 방법에 대해 이야기합니다. 같은 이름의 변수가 다른 곳에서 사용되면 나중에 충돌이 발생할 수 있기 때문에 개발자가 이미 $ rootScope에 선언되어 있음을 인식하지 못합니다. 이것의 중요성은 응용 프로그램의 규모와이를 개발하는 팀에 따라 증가합니다. 이상적으로 $ rootScope는 앱 전체에서 항상 일관되도록 의도 된 상수 또는 정적 변수 만 포함합니다. 모듈간에 물건을 공유하는 더 좋은 방법은 서비스와 공장을 사용하는 것인데, 이는 또 다른 주제입니다!

Question 9

둘 다 Java 스크립트 객체이며 차이점은 아래와 같이 다이어그램으로 설명됩니다.

NTB :
첫 번째 각도 응용 프로그램은 $ scope에서 모든 모델 또는 함수의 속성을 찾으려고합니다. $ scope에서 속성을 찾지 못한 경우 상위 계층의 상위 범위에서 검색합니다. 속성이 상위 계층 구조에서 여전히 발견되지 않으면 angular는 $ rootscope에서 확인을 시도합니다.

Question 10

John Papa의 AngularJS Styleguide 와 같은 새로운 스타일 은 $scope현재 페이지의 속성을 저장 하는 데 전혀 사용하지 말아야한다고 제안 합니다. 대신 controllerAs with vm뷰가 컨트롤러 객체 자체에 바인딩 되는 방식을 사용해야합니다 . 그런 다음 controllerAs 구문을 사용할 때이를 위해 캡처 변수를 사용하십시오. ViewModel을 나타내는 vm과 같은 일관된 변수 이름을 선택하십시오.

$scope그래도 시청 기능 에는 이 필요합니다 .