원래 텍스트는 계속되고 책은 계속 지속됩니다. . . 여전히 http://code.angularjs.org/1.0.2/docs/guide/compiler를 참조하십시오
1. 요약
Angular의 HTML 컴파일러를 사용하면 개발자가 새로운 HTML 구문을 사용자 정의 할 수 있습니다. 컴파일러를 사용하면 HTML 요소 또는 속성, 또는 새로운 HTML 태그, 속성 (예 : <beautiful girl = "cf"> </beautiful>)에 동작을 첨부 할 수 있습니다. Angular는 이러한 추가 행동 지시문을 호출합니다.
HTML에는 정의 문서를 구체적으로 형식화하는 미리 정의 된 HTML 스타일 구조가 많이 있습니다 (브라우저에 태그 된 컨텐츠를 표시하는 방법을 알려줄 수 있음). 무언가를 중심으로해야한다고 가정하고 브라우저에 어떻게 해야하는지 가르 칠 필요가 없다고 가정 해 봅시다 (여기에서 생략 된 단어). 중앙에 필요한 태그에 align = "Center"를 추가하면됩니다. 이것은 선언적 언어에 대한 좋은 것입니다.
그러나 선언적 언어에는 한계가 있습니다. 즉, 브라우저에 사전 정의 된 범위 외부의 구문을 처리하는 방법을 알 수 없습니다. 예를 들어, 브라우저의 1/3을 브라우저의 1/3으로 정렬하는 방법을 브라우저에 알 수 없습니다. 따라서 우리는 브라우저를 시간과 함께 움직이고 새로운 문법을 배우는 방법이 필요합니다.
Angular Pre-Bind는 응용 프로그램 구축에 도움이되는 몇 가지 지침을 제공합니다. 또한 자체 응용 프로그램을위한 고유 한 지침을 만들 수도 있습니다. 이 지침 확장은 우리 자신의 응용 프로그램의 "도메인 특정 언어"가 될 것입니다.
이러한 컴파일은 브라우저 측에서만 발생하며 서버 측 또는 사전 컴파일 단계가 필요하지 않습니다.
2. 컴파일러
각도 서비스로서 컴파일러는 DOM 구조를 가로 지르고 특성을 찾는 데 책임이 있습니다. 컴파일 프로세스는 두 단계로 나뉩니다.
1. 컴파일 : DOM 노드 트리를 가로 지르고 모든 지시문을 수집하십시오. 결과는 연결 기능입니다.
2. 링크 : 지시문을 범위로 바인딩하고 라이브 뷰를 만듭니다. 범위의 변경 사항은보기에 반영됩니다 (보기 업데이트). 템플릿에 대한 모든 사용자의 활동 (변경)은 스코프 모델 (양방향 바인딩)에 반영됩니다. 이를 통해 범위 모델이 올바른 값을 반영 할 수 있습니다.
NG-Repeat와 같은 일부 지침은 컬렉션의 각 요소에 대해 특정 요소 (조합)를 한 번 복사합니다. 컴파일 및 링크는 성능을 향상시키기위한 두 단계입니다. 복제 된 템플릿은 한 번만 컴파일되기 때문에 각 컬렉션의 요소를 한 번 링크합니다 (템플릿 캐시와 유사).
3. 지침
지시문은 컴파일 중에 특정 HTML 구조가 발생할 때 트리거되는 동작입니다. 지시문은 이름, 속성, 클래스 및 요소의 주석으로 배치 할 수 있습니다. 다음은 NG-BIND (내장 지시문)를 참조하는 몇 가지 방법입니다.
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-지침 : ng-bind exp->
Directive는 컴파일러가 DOM에서 발생할 때 실행되는 기능입니다. 지침 API 문서는 지침을 만드는 방법을 자세히 설명합니다.
다음은 요소가 마우스와 함께 숨바꼭질을 할 수있는 샘플입니다 ...
<! docType html> <html lang = "zh-cn"ng-app = "hideankseek"> <head> <meta charset = "utf-8"> <title> hidden and seek </title> <style type = "text/css"> .ng-cloak {display : 없음; . []). 지시 ( "WildCat", 함수 ($ 문서) {var maxleft = 400, maxtop = 300; var msg = [ "i flash ~~", "catch me ~~~", "yafen 나비 ~~", "오 예 ~~", "당신은 너무 열등합니다 ~!" 요소. })"Wildcat"속성을 모든 요소에 추가하면 요소가 새로운 동작을 갖습니다. 이런 식으로, 우리는 브라우저에 숨기고 찾는 요소를 다루는 방법을 가르쳤다 (걱정하지 마십시오. 특정 방에 있지 않으며, 당신은 -_-!). 우리는이 접근법을 통해 브라우저의 "어휘"를 확장했습니다. 이것은 HTML 규칙에 익숙한 사람이라면 비교적 자연스러운 방법입니다.
지금은 늦었고 내일 계속할 것입니다. . . 광고 후에 뵙겠습니다
======================= 화려한 분할 선 ===============================
4.보기를 이해하십시오 (보기)
외부에는 많은 템플릿 시스템이 있으며, 일반적으로 템플릿 문자열을 통해 데이터에 연결하고 최종 HTML 문자열을 생성하며 내부 HTML 속성을 통해 결과를 요소에 작성합니다.
즉, 데이터가 변경되면 데이터 및 템플릿을 다시 문자열로 병합 한 다음 해당 요소에 내부 html로 다시 작성해야합니다. 여기에는 몇 가지 문제가 있습니다. (여기서 문자 그대로 번역을 이해할 수 없습니다 ... yy 만) 그러한 장면이 있다고 가정하고 템플릿에 입력 상자가 포함되어 있다고 가정합니다. 사용자는 입력 상자를 입력하고 템플릿이 동기식으로 업데이트됩니다. 일반 템플릿은 InnerHTML, 문자열 및 데이터 연결을 통해보기를 업데이트하여 사용자 입력을 방해하고 경험이 좋지 않습니다.
Angular는 독특합니다. Angular Compiler (컴파일러)는 문자열 템플릿을 처리하지 않고 지시를 통해 DOM을 처리합니다. 처리 결과는 스코프 모델과 결합하고 실시간 템플릿을 생성하는 연결 기능입니다. 범위 모델에 대한 뷰의 바인딩은 우리에게 투명합니다. 개발자는보기 나 모델을 업데이트하기 위해 어떤 조치도 수행 할 필요가 없습니다. 또한 view 템플릿이 InnerHTML로 업데이트되지 않으므로 사용자 입력이 중단되지 않습니다. 또한 각도 지시문은 텍스트 값을 바인딩 할 수있을뿐만 아니라 행동 구성 일 수 있습니다.
이 각도 의이 처리 방법은 안정적인 DOM을 생성합니다. 이것은 DOM 요소의 수명주기 동안 항상 특정 모델의 인스턴스에 묶여 있으며이 관계는 변하지 않을 것임을 의미합니다. 이는 또한 코드가 DOM 객체에 대한 참조를 유지하고 등록 이벤트 기능을 참조 할 수 있으며이 참조는 템플릿 데이터 병합에 의해 파괴되지 않을 것임을 의미합니다.