이전 섹션에서는 Angular JS 프레임 워크가 간단히 소개됩니다. 이 섹션에서는 Angular 's Bootstrap (부트 스트랩) 및 컴파일러 (컴파일) 메커니즘이 계속 될 것입니다.
1 : 부트 스트랩 : 각도 초기화
1 : Angular에서 권장하는 초기 자동화는 다음과 같습니다.
<! docType html> <html xmlns : ng = "http://angularjs.org"ng-app> <body> ... <script src = "angular.js"> </body> </html
NGAPP를 사용하여 응용 프로그램을 자동으로 부팅 해야하는 루트 노드를 표시합니다. 이는 일반적으로 HTML 태그입니다. DomContentLoaded 이벤트가 각도를 트리거하면 NGAPP를 응용 프로그램의 루트 노드로 자동으로 찾습니다. 발견되면 다음 작업이 수행됩니다.
1.로드 모듈 (모듈) 관련 지침 (지침).
2. 응용 프로그램 인젝터를 만듭니다 (Angular의 주입 메커니즘).
3. 루트 노드 지침으로 NG-APP을 컴파일하고 프로세스하십시오. 이를 통해 Application 루트 노드로 DOM 노드 선택을 사용자 정의 할 수 있습니다.
<! doctype html> <html ng-app = "옵션 modulename"> <body> 나는 다음을 추가 할 수 있습니다 : {{ +}}. <script src = "angular.js"> </script> </body> </html>2 : 수동 초기화 :
초기화를 더 많이 제어하려면 사용자 정의 수동 부팅 방법을 사용하여 Angular의 자동 초기화 대신 초기화 할 수 있습니다. 예를 들어, 템플릿의 특정 내용을 변경하는 것과 같이 템플릿을 컴파일하기 전에 무언가를해야합니다. 수동 부팅 방법은 다음과 같습니다.
<! docType html> <html xmlns : ng = "http://angularjs.org"> <bod> hello {{ 'world'}}! <script src = "http://code.angularjs.org/angular.js"> {Angular.bootstrap (document);}); </script> </body> </html>1. 페이지의 모든 코드가로드 된 후 HTML 템플릿 루트 노드 (일반적인 문서 요소)를 찾으십시오.
2. API/Angular.bootstrap (Angular.bootstrap (element [, modules]))을 호출하여 템플릿을 컴파일하여 실행 가능하게합니다.
둘 : 컴파일러 : Angular의 번역
Angular의 컴파일 메커니즘을 통해 개발자는 브라우저에 새로운 HTML 구문을 추가 할 수 있으므로 일부 HTML 노드, 속성 및 일부 사용자 정의 노드, 속성을 생성 할 수 있습니다. Angular는 이러한 행동을 지시문으로 확장합니다. angular는 유용한 지침을 제공하고 도메인 별 지침을 만들 수 있습니다.
1 : 컴파일러 처리는 두 단계로 나뉩니다.
1. DOM을 변환하고, 지시문을 수집하고, 링크 (연결) 함수를 반환합니다.
2. 살아있는 견해를 생성하기 위해 지침과 범위를 병합하십시오. 범위 모드의 모든 변경 사항은보기에 반영되며 뷰의 사용자 상호 작용도 스코프 모델과 동기화되며 스코프는 단일 데이터 소스입니다.
2 : 지침 명령
지침은 특별한 HTML 디자인 편집에 의해 처리 될 행위입니다. 이름, 속성, 노드 클래스 또는 HTML 주석에 배치 할 수 있습니다. 다음은 Angular의 NG-Bind의 동등한 글쓰기 방법입니다.
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <!-지침 : ng-bind exp>
지시문은 DOM에서 Angular에 의해 실행되는 함수 일뿐입니다. 다음은 SPAN 및 DIV의 속성에 적용 할 수있는 드래그 및 드롭의 예입니다.
Angular.Module ( 'drag', []). Directive ( 'draggable', function ($ document) {var startx =, starty =, x =, y =; return function (scope, element, attr) {element.css ({positive : 'px solid red', background color : 'lightgrey', cursor : 'elegall.bind'); 함수 (startx). 왼쪽 : x + 'px'})} mouseup () {mousemove ', mousemove.데모
당신은 나를 어디든 끌고 옮길 수 있습니다!
3 : 이해를 봅니다
많은 템플릿 엔진은 템플릿과 모델을 병합하여 문자열을 반환 한 다음 InnerHTML을 사용하여 DOM 노드에 추가되도록 설계되었습니다. 이는 새로운 컨텐츠를 생성하고 DOM에 추가되도록 데이터의 변경 사항을 다시 해제해야한다고 생각됩니다. 다음 수치는 단방향 바인딩 기술에 속합니다.
Angular는 문자열 대신 지침 지침을 사용하지 않습니다. 리턴 값은 데이터 모델을 병합하는 링크 함수입니다. 보기와 모델의 바인딩은 자동적이고 투명하며 개발자가 뷰를 업데이트하기 위해 추가 작업을 추가 할 필요는 없습니다. Angular는 데이터 모델의 바인딩 일뿐 만 아니라 행동의 개념이기도합니다. 양방향 결합으로서 모양은 다음과 같습니다.
재료:
1.angular 공식 웹 사이트 : http://angularjs.org/
2. 코드 다운로드 : https://github.com/angular/angular.js
위는 편집자가 소개 한 각도 부트 스트랩 및 컴파일러 메커니즘입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!