Angularjs 기본 시작하기_AngularJS

이에 대해서는 사실 누구를 타겟으로 해야 할지, 어디서부터 써야 할지 잘 모르겠어서, 여기서는 간단한 생각으로 글을 시작하겠습니다

1.angular.element
2.angular.Bootstrap

ng-app을 노드에 적용하면 Angle이 자동으로 노드를 초기화한다는 것을 우리는 잘 알고 있습니다. 초기화 과정은 다음 단계로 나누어집니다

1. Angular는 문서 로드 중에 자동으로 초기화됩니다. 먼저 ng-app 명령에 지정된 노드를 찾습니다.
2. 모듈 관련 명령어 로드
3. 애플리케이션과 관련된 인젝터(종속성 관리자)를 생성합니다
4. 지정된 ng-app을 루트 노드로 사용하여 Dom

컴파일을 시작합니다.

이제 직접 초기화하고 ng-app 명령과 동일한 것을 만들어 보겠습니다. angle.element는 원본 DOM 요소나 HTML 문자열을 jQuery 요소로 래핑하는 래퍼입니다. angular.Bootstrap은 스크립트를 수동으로 초기화할 수 있습니다. 이 두 가지를 사용하여 이 스크립트를 초기화합니다.

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

본문>

2.컴파일러

AngularJ의 공식 문서는 모두 ngApp, ngModule, ngBind 등과 같은 낙타 표기법이라는 것을 분명히 알 수 있습니다. 이는 html 컴파일러를 사용하여 요소 속성과 태그를 직접 정의할 수 있습니다. 행동을 지시문이라고 합니다.
공식문서에서는 컴파일러에 대해 다음과 같이 설명하고 있습니다

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

컴파일러
컴파일러는 DOM을 탐색하여 속성을 찾는 Angular 서비스입니다. 컴파일 프로세스는 두 단계로 진행됩니다.

컴파일: DOM을 순회하여 모든 지시문을 수집합니다. 결과는 연결 기능입니다.

링크: 지시문을 범위와 결합하여 라이브 뷰를 생성합니다. 범위 모델의 모든 변경 사항이 뷰에 반영되고 뷰와의 모든 사용자 상호 작용이 범위 모델에 반영됩니다. 진실의 근원.

ng-repeat clone DOM 요소와 같은 일부 지시어는 컬렉션의 각 항목에 대해 한 번씩 컴파일 및 링크 단계를 사용하면 복제된 템플릿을 한 번만 컴파일한 다음 각 복제 인스턴스에 대해 한 번만 연결하면 되기 때문에 성능이 향상됩니다.

컴파일러는 DOM 노드 순회 및 속성 검색을 담당하는 Angular 서비스입니다.

1. 컴파일: 노드를 순회하여 모든 지시문을 수집하고 연결 함수를 반환합니다.
2. 링크: 지시문을 범위에 바인딩하고 라이브 보기를 만듭니다. 범위의 모든 변경 사항은 보기에 반영됩니다(보기 업데이트). 템플릿의 모든 사용자 활동(변경)은 범위 모델에 반영됩니다(양방향 바인딩). 이를 통해 범위 모델이 올바른 값을 반영할 수 있습니다.
ng-repeat와 같은 일부 지시문은 컬렉션의 각 요소에 대해 특정 요소(조합)를 한 번씩 복사합니다. 컴파일과 연결의 두 단계는 성능을 향상시킵니다. 복제된 템플릿은 한 번만 컴파일한 다음 컬렉션의 각 요소에 대해 한 번만 연결하면 되기 때문입니다(템플릿 캐싱과 유사).

3. 단계별로 자신만의 지시문을 만듭니다

1. 지시문 이해하기
우선, 지시문은 ngModule과 같은 낙타 표기법 명명을 따른다는 점을 이해하세요. 컴파일 시 매칭은 다음과 같습니다.

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

지시문은 x- 또는 data-를 접두사로 사용할 수 있으며 아래와 같이:, - 또는 _와 같은 구분 기호를 사용하여 카멜 표기법 명명 방법을 변환할 수 있습니다.

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

일반적으로 우리는 ngBind에 대응하기 위해 ng-bind를 사용하는데, 이 형식은
$compile은 요소 이름, 속성, 클래스 이름 및 주석을 기반으로 지시문을 일치시킬 수 있습니다

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

내-디렉터리>

컴파일 과정에서 컴파일러는 $interpolate 서비스를 통해 텍스트와 속성에 포함된 표현식(예: {{something}})을 일치시킵니다. 이러한 표현식은 시계로 등록되고 다이제스트 주기의 일부로 업데이트됩니다. 다음은 간단한 보간법입니다.
안녕하세요 {{username}}님!

2. 컴파일 단계

HTML "컴파일"의 세 단계:

1. 먼저 브라우저의 표준 API를 통해 HTML을 DOM 개체로 변환합니다. 이것은 중요한 단계입니다. 템플릿은 구문 분석 가능한(사양 준수) HTML이어야 하기 때문입니다. 이는 일반적으로 DOM 요소가 아닌 문자열을 기반으로 하는 대부분의 템플릿 시스템과 비교할 수 있습니다.
2. $comple() 메소드를 호출하면 DOM 컴파일이 완료됩니다. 이 메서드는 DOM을 순회하여 지시문과 일치합니다. 일치가 성공하면 해당 DOM과 함께 지시어 목록에 추가됩니다. 지정된 DOM과 관련된 모든 지시어가 식별되는 한 우선 순위에 따라 정렬되고 해당 compile() 함수는 이 순서대로 실행됩니다. 지시문의 컴파일 기능에는 DOM 구조를 수정할 수 있는 기회가 있으며 link() 기능의 구문 분석을 생성하는 역할을 합니다. $compile() 메서드는 모든 지시문의 자체 컴파일 함수에서 반환되는 연결 함수 모음인 결합된 연결 함수를 반환합니다.
3. 이전 단계에서 반환된 연결 함수를 통해 템플릿을 범위에 연결합니다. 이는 차례로 지시문의 자체 연결 기능을 호출하여 요소에 일부 리스너를 등록하고 범위와 함께 일부 감시를 설정할 수 있도록 합니다. 그 결과 범위와 DOM 간의 양방향 즉각적인 바인딩이 이루어집니다. 범위가 변경되면 DOM은 해당 응답을 받습니다.

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

var $compile = ...; // 코드에 삽입
var 범위 = ...;
var html = '

';
// 1단계: HTML을 DOM 요소로 구문 분석
var 템플릿 = angle.element(html);
// 2단계: 템플릿 컴파일
var linkFn = $compile(템플릿);
// 3단계: 컴파일된 템플릿을 범위와 연결합니다.
linkFn(범위);

ngAttr 속성 바인딩

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

오늘은 여기까지입니다. 내일부터 디렉티브 작성 및 작성을 시작하겠습니다 ~~~ 길이를 너무 길게 잡지 마세요. 이 장에는 주요 개념이 많이 있습니다~~~