AngularJS HTML 컴파일러 소개_AngularJS

개요

AngularJS의 HTML 컴파일러를 사용하면 브라우저가 새로운 HTML 구문을 인식할 수 있습니다. 이를 통해 동작을 HTML 요소 또는 속성에 연결할 수 있으며 사용자 지정 동작으로 새 요소를 만들 수도 있습니다. AngularJS는 이 동작 확장을 "지시문"이라고 부릅니다.

HTML에는 정적 페이지를 작성할 때 형식을 제어하는 ​​많은 선언적 구조가 있습니다. 예를 들어 콘텐츠를 중앙에 배치하려는 경우 브라우저에 "창의 중간점을 찾아서 콘텐츠의 중간점과 결합"하라고 지시할 필요가 없습니다. 콘텐츠를 중앙에 배치해야 하는 요소에 align="center" 속성을 추가하기만 하면 됩니다. 이것이 선언적 언어의 힘이다.

그러나 선언적 언어에도 한계가 있습니다. 그 이유 중 하나는 브라우저에 새로운 구문을 인식하도록 지시할 수 없다는 것입니다. 예를 들어 콘텐츠를 중앙에 배치하지 않고 왼쪽으로 1/3만 배치하려는 경우에는 그렇게 할 수 없습니다. 따라서 브라우저가 새로운 HTML 구문을 배울 수 있는 방법이 필요합니다.

AngularJS에는 APP 생성을 위한 매우 유용한 지침이 제공됩니다. 또한 자신의 응용 프로그램에 유용한 몇 가지 명령을 직접 만들 수 있기를 바랍니다. 이러한 확장 지침은 앱을 만드는 데 사용되는 "도메인별 언어"입니다.

컴파일 프로세스는 브라우저 측에서 발생합니다. 서버 측에서는 어떤 단계에도 참여하지 않으며 사전 컴파일되지도 않습니다.

컴파일러

컴파일러는 AngularJS에서 제공하는 서비스로 DOM을 탐색하여 관련 속성을 찾습니다. 전체 컴파일 프로세스는 두 단계로 나뉩니다.

1. 컴파일: DOM을 탐색하고 관련 명령어를 모두 수집하여 링크 기능을 생성합니다.

2. 링크: 범위를 명령어에 바인딩하고 동적 보기를 생성합니다. 범위 모델에 대한 모든 변경 사항은 보기에 반영되고 보기에 대한 모든 사용자 작업도 범위 모델에 반영됩니다. 이는 범위 모델을 비즈니스 로직이 관심을 가져야 하는 유일한 것으로 만듭니다.

데이터 컬렉션의 각 DOM 요소를 복제하는 ng-repeat와 같은 몇 가지 지침이 있습니다. 전체 컴파일 프로세스를 컴파일과 링크의 두 단계로 나누면 복제된 템플릿을 총 한 번만 컴파일한 다음 해당 모델 인스턴스에 연결하면 되므로 전반적인 성능이 향상됩니다.

명령

지시문은 "관련 HTML 구조가 컴파일 단계에 들어갈 때 수행해야 하는 작업"을 나타냅니다. 지침은 요소 이름, 속성, CSS 클래스 이름 또는 주석에 작성할 수 있습니다. 다음은 동일한 기능으로 ng-bind 지시문을 사용하는 몇 가지 예입니다.

코드 복사 코드는 다음과 같습니다.

지시문은 본질적으로 컴파일러가 관련 DOM으로 컴파일할 때 실행되어야 하는 함수일 뿐입니다. 명령 API 문서에서 명령에 대한 자세한 정보를 확인할 수 있습니다.

다음은 요소를 드래그 가능하게 만드는 명령입니다. 요소의 draggable 속성을 확인하세요.

index.html:

코드 복사 코드는 다음과 같습니다.

드래그 ME