개요
AngularJS의 HTML 컴파일러를 사용하면 브라우저가 새로운 HTML 구문을 인식 할 수 있습니다. 이를 통해 동작을 HTML 요소 또는 속성에 연결할 수 있으며 사용자 지정 동작으로 새로운 요소를 만들 수도 있습니다. Angularjs는이 동작을 "지침"으로 확장합니다.
HTML에는 정적 페이지를 작성할 때 형식을 제어하기위한 많은 선언 구조가 있습니다. 예를 들어, 컨텐츠를 중앙에 놓으려면 브라우저에 "창의 중간 점을 찾고 콘텐츠의 중간에 결합하도록"브라우저에 알릴 필요가 없습니다. 중앙에 필요한 요소에 Align = "Center"속성을 추가하면됩니다. 이것은 선언적 언어의 힘입니다.
그러나 선언적 언어에는 달성 할 수없는 것이 있으며 그 이유 중 하나는 브라우저가 새로운 구문을 인식 할 수 있도록 사용할 수 없기 때문입니다. 예를 들어, 콘텐츠를 중심으로하지 않고 왼쪽의 1/3에 해당하는 경우에는 할 수 없습니다. 따라서 브라우저가 새로운 HTML 구문을 배울 수있는 방법이 필요합니다.
AngularJS 학생들은 앱을 만드는 데 매우 유용한 몇 가지 지침에서 비롯됩니다. 또한 자신의 응용 프로그램에 유용한 몇 가지 지침을 만들 수 있기를 바랍니다. 이러한 확장 된 지침은 앱을 만드는 "도메인 특정 언어"입니다.
컴파일 프로세스는 브라우저 측에서 발생합니다. 서버 측은 어떤 단계에도 참여하지 않으며 사전 컴파일되지 않습니다.
호소자
컴파일러는 AngularJS가 제공하는 서비스입니다. DOM을 통과하여 관련 특성을 검색합니다. 전체 컴파일 프로세스는 두 단계로 나뉩니다.
1. 컴파일 : DOM을 통과하고 링크 함수를 생성하기 위해 모든 관련 지침을 수집하십시오.
2. 링크 : 범위를 지시에 바인딩하고 동적보기를 생성하십시오. 범위 모델의 변경 사항은보기에 반영되며보기의 사용자 작업은 스코프 모델에 반영됩니다. 이것은 스코프 모델을 비즈니스 로직에서 돌봐야 할 유일한 것입니다.
NG-Repeat와 같은 몇 가지 지침이 있는데, 이는 데이터 세트에서 모든 DOM 요소를 한 번 복제합니다. 전체 컴파일 프로세스를 두 단계로 나누는 관행은 컴파일 및 연결이 전체 성능을 향상시킵니다. 복제 된 템플릿은 총 한 번만 컴파일 된 다음 해당 모델 인스턴스에 연결되기 때문입니다.
지침
지침은 "관련 HTML 구조가 컴파일 단계로 들어갈 때 수행 해야하는 동작"을 나타냅니다. 지시문은 요소의 이름, 속성, CSS 클래스 이름 및 주석으로 작성할 수 있습니다. 다음은 동일한 기능을 가진 NG- 결합 지시문을 사용하는 몇 가지 예입니다.
코드 사본은 다음과 같습니다.
<span ng-bind = "exp"> </span>
<span> </span>
<ng-bind> </ng-bind>
<!-지침 : ng-bind exp->
지시문은 본질적으로 컴파일러가 관련 DOM에 컴파일 할 때 실행 해야하는 기능입니다. Directive API 문서에서 지시문에 대한 자세한 정보를 찾을 수 있습니다.
아래는 요소를 드래그하기 쉽게 만드는 명령입니다. <span> 요소의 Draggable 속성에 유의하십시오.
index.html :
코드 사본은 다음과 같습니다.
<! doctype html>
<html ng-app = "drag">
<헤드>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<span draggable> drag me </span>
</body>
</html>
script.js :
코드 사본은 다음과 같습니다.
Angular.Module ( '드래그', []).
지시문 ( 'draggable', function ($ document) {
var startx = 0, starty = 0, x = 0, y = 0;
반환 함수 (스코프, 요소, attr) {
element.css ({
위치 : '상대적',
국경 : '1px solid red',
BuckgrendColor : 'Lightgrey',
커서 : '포인터'
});
요소 .Bind ( 'Mousedown', function (이벤트) {
startx = event.screenx -x;
starty = event.screeny -y;
$ document.bind ( 'mousemove', mousemove);
$ document.bind ( 'MouseUp', MouseUp);
});
함수 MouseMove (이벤트) {
y = event.screeny- 스타일;
x = event.screenx -startx;
element.css ({
상단 : Y + 'PX',
왼쪽 : x + 'px'
});
}
함수 마우스 업 () {
$ document.unbind ( 'MouseMove', MouseMove);
$ document.unbind ( '마우스 업', 마우스 업);
}
}
});
이 새로운 동작은 Draggable 속성을 추가하여 달성 할 수 있습니다. 우리의 개선의 아름다움은 브라우저에 새로운 기능을 제공한다는 것입니다. 개발자가 HTML 규칙에 익숙한 한 새로운 행동과 새로운 구문을 이해하는 브라우저의 능력을 확장하는 자연스러운 방법을 사용했습니다.
견해를 이해하십시오
온라인으로 많은 템플릿 시스템이 있습니다. 그들 대부분은 "정적 문자 템플릿과 데이터를 바인딩하고, 새로운 문자를 생성하고, 내부 html을 통해 페이지 요소에 삽입하십시오".
즉, 데이터의 변경으로 인해 데이터가 템플릿으로 재조합되어 새 문자를 생성 한 다음 DOM에 삽입됩니다. 발생하는 문제에는 다음이 포함됩니다. 사용자 입력을 읽고 모델 데이터와 결합해야하며 사용자 입력을 덮어 써야하며 전체 업데이트 프로세스를 수동으로 관리해야하며 풍부한 표현이 부족해야합니다.
AngularJS는 다릅니다. AngularJS 컴파일러는 문자열 템플릿 대신 지침과 함께 DOM을 사용합니다. 스코프 모델과 결합하여 동적보기를 생성하는 링크 함수를 반환합니다. 이 뷰와 모델의 바인딩 과정은 "투명"입니다. 개발자는보기 업데이트에 대해 아무것도 할 필요가 없습니다. 응용 프로그램은 InnerHTML을 사용하지 않으므로 사용자의 입력을 덮어 쓸 필요가 없습니다. 보다 구체적으로, Angular의 지침은 문자열 바인딩을 사용할 수있을뿐만 아니라 행동을 나타내는 일부 구조를 사용할 수 있습니다.
AngularJS 컴파일은 "안정적인 dom"을 생성합니다. 이는 데이터 모델에 바인딩 된 DOM 요소의 인스턴스가 바인딩의 수명주기 동안 변하지 않음을 의미합니다. 이는 또한 코드가 템플릿과 데이터를 결합 할 때이 참조가 손실 될 것이라고 걱정하지 않고 DOM 요소 및 레지스터 이벤트의 인스턴스 참조를 얻을 수 있음을 의미합니다.