Angular의 서비스 중에는 ng의 핵심이라고 할 수 있는 서비스가 있기 때문에 꼭 이해하셔야 할 서비스가 있습니다. 오늘은 ng, $parse, $compile 두 가지 핵심 서비스를 소개하겠습니다. 사실 많은 사람들이 이 두 서비스에 대해 이야기하지만, 나는 이 두 서비스에 대한 나의 이해를 이야기하기 위해 여기에 왔습니다.

$eval은 실제로 서비스가 아니며 서비스로 간주할 수 없습니다. 또한 구문 분석을 기반으로 하기 때문에 다른 것으로 간주할 수 있습니다. $parse 버전입니다. ng 소스 코드에서 $eval의 정의를 살펴보겠습니다.

$eval: function(expr, locals) {
    return $parse(expr)(this, locals);
   },

로그인 후 복사

소스 코드를 읽으면 모두가 이해할 것이라고 믿습니다. 좋아요, 이제 두 가지 핵심 서비스에 대한 설명을 시작하겠습니다. 제가 말한 내용이 잘못되었다고 생각되면 댓글 영역이나 비공개 채팅에서 자유롭게 지적해 주세요. 다른 독자들에게 피해를 주지 않도록 말이죠.

이 두 서비스에 대해 이야기할 때 먼저 이 게시물의 개념인 context에 대해 이야기하고 싶습니다.

이 "context"에 대해 많은 사람들이 들어봤을 거라 생각하지만 아마도 그럴 수도 있습니다. 조금 모호합니다. 귀하가 이 진술을 수락하는지 확인하기 위해 여기서 설명하겠습니다.

Angular의 데이터 바인딩을 기억하시나요? 예를 들어, 이제 TestCtrl이라는 컨트롤러가 있고 그 내용은 다음과 같습니다.

.controller(&#39;TestCtrl&#39;, function($scope) {
    　　$scope.test = "Boo!!!"
  })

로그인 후 복사

html에서 코드는 다음과 같습니다

<body ng-controller="TestCtrl">
  {{test}}
</body>

로그인 후 복사

그러면 아무 생각 없이 결과를 알 수 있을 텐데, 페이지에는 반드시 부(Boo)라는 단어가 나올 겁니다.

그런데 ng-controller 지시문을 삭제하면 어떻게 되나요? 즉, html로 컨트롤러를 선언하지 않았습니다. {{test}}를 직접 바인딩하면 어떻게 될까요?

결과는 하나뿐입니다. 즉, 페이지에 아무것도 없습니다(ps: ng-app을 선언했기 때문입니다). 이것을 이해합니까?

컨트롤러는 컨텍스트 컨테이너와 동일합니다. 실제 컨텍스트는 실제로 $scope입니다. 페이지가 테스트에 바인딩될 때 컨트롤러가 선언되면 현재 컨텍스트는 컨트롤러의 $scope이고 ng입니다. 컨트롤러의 $scope 컨텍스트에 테스트가 있는지 확인하면 당연히 표시되지만 컨트롤러를 선언하지 않으면 어떻게 되나요? 그의 컨텍스트 컨테이너는 ng-app이고 실제 컨텍스트는 $rootScope입니다. 이때 그는 테스트가 있는지 확인하기 위해 $rootScope를 찾습니다.

자, 이제 컨텍스트 개념에 대한 이야기를 마쳤습니다. 사실 이해하기 매우 쉽습니다.

이제 본격적으로 이야기를 시작하겠습니다. $parse.가장 먼저 살펴봐야 할 것은 ng API 문서

var getter = $parse(&#39;user.name&#39;);
var setter = getter.assign;
var context = {user:{name:&#39;angular&#39;}};
var locals = {user:{name:&#39;local&#39;}};
 
expect(getter(context)).toEqual(&#39;angular&#39;);
setter(context, &#39;newValue&#39;);
expect(context.user.name).toEqual(&#39;newValue&#39;);
expect(getter(context, locals)).toEqual(&#39;local&#39;);

로그인 후 복사

입니다. $parse 서비스에 대한 ng 문서에서

getter와 setter는 잘 알려진 get 메서드이고 context는 json 개체일 뿐입니다

. 다음 네 가지 문장은 결국 테스트를 통과할 수 있습니다. 이제 하나씩 분석해 보기 전에 $parse

$parse 서비스가 실제로 표현식을 구문 분석하는 기능인지 설명해야 합니다. ng-model="test", html로 작성합니다. ng-model="test"에서 실제로 바인딩하려는 것이 현재 컨트롤러(컨텍스트 컨테이너)의 범위(컨텍스트)에 있는 테스트 값이라는 것을 누가 알겠습니까? ) ng는 $parse 서비스를 통해 이를 구문 분석하는 데 도움이 되므로 $parse 서비스를 호출할 때 테스트를 찾을 범위(컨텍스트)를 ng에게 알려야 합니다.

테스트 코드의 첫 번째 줄은 다음과 같습니다.

getter(context)).toEqual(&#39;angular&#39;) //实际上就是 $parse(&#39;user.name&#39;)(context)

로그인 후 복사

이 맥락에서는 컨텍스트이고, " angle "을 반환할 수 있습니다. 이 문자열의 원리는 다음 세 단계를 거치는 것입니다.

1. 현재 표현식 user.name을 가져옵니다.

2. 현재 컨텍스트 개체를 가져옵니다. {name:' angle'}}

3. 상위 및 하위 질문 개체에서 표현식을 찾고, 마지막으로 "angular" 문자를 얻어서

을 생성하므로 이 테스트 코드는 성공합니다. .

두 번째 메소드인 setter 메소드를 살펴보겠습니다

setter(context, &#39;newValue&#39;);//实际上就是 $parse(&#39;user.name&#39;).assign(context, &#39;newValue&#39;)
expect(context.user.name).toEqual(&#39;newValue&#39;);//测试数据上下文的值是否被改变

로그인 후 복사

여기서 setter 메소드는 실제로 값 변경 메소드입니다

1. 현재 표현식 user.name 가져오기

2. 현재 컨텍스트 객체 {user:{name:'angular'}} 가져오기

3. , 컨텍스트 객체 프로그래밍 {user:{name:'newValue'}}

따라서 컨텍스트 객체가 변경되었습니다. getter 메서드를 사용하여 표현식을 다시 가져오면 컨텍스트가 {user:{name: 'angular' }} --> {user:{name:'newValue'}}, 최종적으로 얻은 표현식의 값은 당연히 "newValue"이므로 테스트 코드도 통과됩니다.

expect(getter(context, locals)).toEqual(&#39;local&#39;);//实际上就是$parse(&#39;user.name&#39;)(context, locals)

로그인 후 복사

여기서 보여드릴 것은 실제로 Context Replacement 기능입니다.

getter 메소드에서는 첫 번째 컨텍스트를 선택할 수 있을 뿐만 아니라 두 번째 매개변수를 전달하면 두 번째 컨텍스트가 첫 번째 컨텍스트를 덮어쓰게 되므로 주의하세요.

1. 현재 표현식 user.name

을 가져옵니다. 2. 현재 컨텍스트 개체 {user:{name:'angular'}}를 가져옵니다.

3. 현재 컨텍스트를 덮어씁니다. name:'local'}}

4. 구문 분석 후 표현식의 값을 가져옵니다

$eval로 돌아가면, $eval 소스 코드에서 $eval에는 get 함수만 있고 set 함수는 없지만 때로는 값 수정 효과를 얻기 위해 두 번째 컨텍스트를 전달하도록 선택할 수도 있습니다.

여기서 $parse 서비스가 끝났고, 다음 단계는 $compile입니다

---------------------- - ---------------------------

$parse의 개념을 이해하시면 $compile도 비슷하다고 생각합니다. 이해하세요. 실제로 $parse와 매우 유사합니다. 그러나 이는 HTML 코드 조각을 구문 분석하고 그 기능은 명령의 핵심 서비스이기도 한 죽은 템플릿을 라이브 템플릿으로 바꾸는 것입니다.

예를 들어 HTML 코드

가 있는데 이 코드를 HTML 코드에 직접 넣으면 어떻게 되는지 모르겠습니다. 내용은 모두가 이해해야 할 것입니다. 이것은 죽은 템플릿이며 소위 라이브 템플릿은 그 안의 모든 데이터가 데이터에 의해 바인딩되었음을 의미합니다. {{test}}는 데이터를 바인딩할 현재 컨텍스트를 자동으로 찾습니다. 마지막으로 표시되는 것은 라이브 템플릿, 즉 데이터 바인딩된 템플릿입니다.

$compile('dead template')(컨텍스트 객체), 죽은 템플릿이 라이브 템플릿에 프로그래밍되고 이 라이브 HTML 코드에 대해 현재 노드에 추가하는 등의 작업을 수행할 수 있도록 합니다. , 등 잠깐만요.

그러나 명령에서는 사전 링크와 사후 링크 두 가지 기능을 반환합니다

첫 번째로 실행되는 것은 사전 링크이며 동일한 명령에 대한 순회 순서는 Traversal from Traversal에서 옵니다. 상위 노드에서 하위 노드로. 이 단계에서 DOM 노드는 아직 안정화되지 않았으며 일부 바인딩 이벤트 작업을 수행할 수 없지만 여기에서 일부 초기화 데이터를 처리할 수 있습니다.

두 번째 실행은 흔히 링크 기능이라고 부르는 포스트 링크입니다. 이 단계에서는 일반적으로 DOM 노드가 안정화됩니다. 여기.