사실, 나는 누가 대상이되어야하는지 또는 글쓰기를 시작 해야하는 곳을 모르기 때문에 간단한 아이디어에 따라 글쓰기를 시작할 것입니다.
1.angular.element
2.angular.bootstrap
NG--APP이 노드에 적용되고 Angular가 자동으로 초기화하는 데 도움이된다는 것이 매우 분명합니다. 초기화 프로세스는 다음 단계로 나뉩니다
1. 문서로드하면 자동으로 초기화되며 먼저 NG-App 지시문으로 지정된 노드가 있습니다.
2.로드 모듈 관련 지침
3. 응용 프로그램 관련 인젝터 생성 (종속 관리자)
4. 기존 NG-App을 루트 노드로 컴파일하는 시작
이제 우리는 그것을 스스로 초기화하고 NG-APP 지침과 동등한 것을 만듭니다. angular.element 이것은 래퍼이며 원래 dom 요소 또는 html 문자열을 jQuery 요소로 포장합니다. Angular.bootstrap은 스크립트를 수동으로 초기화 할 수 있습니다.이 두 가지를 사용 하여이 스크립트를 초기화합니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "zh-cn">
<헤드>
<meta charset = "utf-8">
<title> 부트 스트랩 매뉴얼 </title>
<스타일 유형 = "텍스트/CSS">
.ng-cloak {
디스플레이 : 없음;
}
</스타일>
</head>
<body>
다음은 ng-app 외부 ~~ {{1+2}}입니다.
<div id = "widuu"> 이것은 ng-app ~~~ {{1+2}} </div>에 있습니다
<script src = "angular.min.js"type = "text/javaScript"> </script>
<script type = "text/javaScript">
Angular.element (document) .ready (function () {
Angular.bootstrap (Angular.element (document.getElementById ( "widuu")));
});
</스크립트>
</body>
</html>
2. Compiler
우리는 공식 AngularJS 문서가 NGAPP, NGModule, NGBIND 등과 같은 낙타 명명법으로 가득 차 있음을 분명히 알 수 있습니다. 그 중에서 HTML 컴파일러를 사용하면 요소 속성과 태그를 스스로 정의 할 수 있습니다. Angular는 이러한 추가 행동 지시문을 호출합니다.
공식 문서는 이와 같은 컴파일러를 설명합니다
코드 사본은 다음과 같습니다.
컴파일러
컴파일러는 속성을 찾는 DOM을 가로 지르는 각도 서비스입니다. 컴파일 프로세스는 두 단계에서 발생합니다.
컴파일 : DOM을 가로 지르고 모든 지침을 수집하십시오. 결과는 연결 기능입니다.
링크 : 지침을 범위와 결합하고 라이브 뷰를 생성하십시오. 범위 모델의 모든 변경 사항은보기에 반영되며보기와의 사용자 상호 작용은 스코프 모델에 반영됩니다. 이것은 범위 모델을 단일 진실의 원천으로 만듭니다.
컬렉션의 각 항목에 대해 NG-Repeat Clone DOM 요소와 같은 일부 지침. 복제 된 템플릿은 한 번만 컴파일 된 다음 각 클론 인스턴스에 대해 한 번 연결되므로 컴파일 및 링크 위상을 사용하면 성능이 향상됩니다.
컴파일러는 DOM 노드를 가로 지르고 속성을 찾는 데 책임이있는 각도 서비스입니다. 컴파일은 두 단계로 나뉩니다.
1. 컴파일 : 노드를 가로 지르고 모든 지시문을 수집하고 연결 기능을 반환합니다.
2. 링크 : 지시문을 범위로 바인딩하고 라이브 뷰를 만듭니다. 범위의 변경 사항은보기에 반영됩니다 (보기 업데이트). 템플릿에 대한 모든 사용자의 활동 (변경)은 스코프 모델 (양방향 바인딩)에 반영됩니다. 이를 통해 범위 모델이 올바른 값을 반영 할 수 있습니다.
NG-Repeat와 같은 일부 지침은 컬렉션의 각 요소에 대해 특정 요소 (조합)를 한 번 복사합니다. 컴파일 및 링크는 성능을 향상시키기위한 두 단계입니다. 복제 된 템플릿은 한 번만 컴파일되기 때문에 각 컬렉션의 요소를 한 번 링크합니다 (템플릿 캐시와 유사).
3. 자신만의 지침을 단계별로 만듭니다
1. 지침을 이해하십시오
우선, 우리는 지침이 ngmodule과 같은 낙타 명명법을 기반으로한다는 것을 이해합니다. 컴파일 할 때는 일치가 다음과 같습니다.
코드 사본은 다음과 같습니다.
<입력 ng-model = "foo">
<입력 data-ng : model = "foo">
Directive는 X- 또는 데이터를 접두사로 사용할 수 있으며 다음과 같이 낙타 명명 방법을 변환하기 위해 :,- 또는 _ 등을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
<span ng-bind = "name"> </span> <br/>
<span ng : bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
일반적으로 NG-BIND를 사용하여 NGBIND에 해당합니다.
$ compile은 요소 이름, 속성, 클래스 이름 및 댓글에 따라 지시어와 일치 할 수 있습니다.
코드 사본은 다음과 같습니다.
<my-dir> </my-dir>
<span my-dir = "exp"> </span>
<!-지침 : my-dir exp->
<span> </span>
컴파일 프로세스 중에 컴파일러는 $ interpolate 서비스를 통해 속성 (예 : {{something}})의 내장 된 표현식과 텍스트와 일치합니다. 이 표현식은 시계로 등록되며 다이제스트주기의 일부로 함께 업데이트됩니다. 간단한 보간은 다음과 같습니다.
<img src = "img/{{username}}. jpg"/> hello {{username}}!
2. 컴파일 단계
HTML을 "컴파일하는 세 단계 :
1. 먼저 브라우저의 표준 API를 통해 HTML을 DOM 객체로 변환하십시오. 이것은 매우 중요한 단계입니다. 템플릿은 구문 분석 할 수 있어야하므로 (사양을 준수). 이것은 대부분 DOM 요소가 아닌 문자열을 기반으로하는 대부분의 템플릿 시스템과 비교할 수 있습니다.
2. DOM의 컴파일은 $ comple () 메소드를 호출하여 수행됩니다. 이 방법은 DOM을 가로 지르고 지침과 일치합니다. 경기가 성공하면 해당 DOM과 함께 지시 목록에 추가됩니다. 지정된 DOM과 관련된 모든 지시문이 식별되는 한 우선 순위로 정렬되고 해당 순서대로 Compile () 함수를 실행합니다. Directive Compile Function은 DOM 구조를 수정할 수있는 기회가 있으며 Link () 함수의 구문 분석을 생성 할 책임이 있습니다. $ compile () 메소드는 결합 된 링크 함수를 리턴합니다.이 함수는 지침 자체의 compile 함수에 의해 리턴 된 연결된 함수 모음입니다.
3. 이전 단계에서 반환 된 연결 함수를 통해 템플릿을 범위에 연결하십시오. 이로 인해 Directive의 자체 링크 기능을 호출하여 요소에 일부 청취자를 등록하고 스코프가있는 시계를 만들 수 있습니다. 결과는 스코프와 DOM 사이의 양방향, 즉각적인 결합입니다. 범위가 변경되면 DOM은 해당 응답을 얻습니다.
코드 사본은 다음과 같습니다.
var $ compile = ...; // 코드에 주입되었습니다
var scope = ...;
var html = '<div ng-bind ='exp '> </div>';
// 1 단계 : html을 dom 요소로 구문 분석합니다
var 템플릿 = Angular.element (HTML);
// 2 단계 : 템플릿을 컴파일합니다
var linkfn = $ compile (템플릿);
// 3 단계 : 컴파일 된 템플릿을 범위와 연결합니다.
linkfn (범위);
ngattr 속성 바인딩
코드 사본은 다음과 같습니다.
<SVG>
<circle ng-attr-cx = "{{cx}}"> </circle>
</svg>
그게 오늘이었고 내일 지시를 만들기 위해 글을 쓰기 시작 ~~~ 제어 길이가 너무 길어서는 안됩니다.이 장에는 많은 주요 개념이 있습니다 ~~~