Angular1

AngularJS 는 어떻게 페이지 를 렌 더 링 합 니까?

         index.html   ，             ：
 -   html，     DOM；
 -   angular.js  ； 
 - AngularJS  DOMContentLoaded     ；
 - AngularJS  ng-app  ，               ； 
 -   ng-app        $injector；
 -   injector  injector  compile   $rootScope；
 -   compile    DOM      compile    DOM      rootScope ；  
 - ng-init   scope     name    ；     {{name}}    ，   ，   “Hello World!”

그러면 문제 가 왔 습 니 다.1.$injector 는 신마 입 니 다.

Angular 는 브 라 우 저의 이벤트 회로 와 어떻게 상호작용 을 합 니까?
주로 세 단계 로 나 뉜 다.1.브 라 우 저의 이벤트 회 로 는 이벤트 의 촉발 을 기다 리 고 있다.이 벤트 는 사용자 의 상호작용,정시 이벤트 나 네트워크 이벤트(예 를 들 어 서버 의 응답 등)를 포함한다.2.이벤트 가 발생 하면 자 바스 크 립 트 의 context 에 들 어가 리 셋 함 수 를 통 해 DOM 을 수정 합 니 다.3.리 셋 함수 가 실 행 된 후에 브 라 우 저 는 새로운 DOM 에 따라 새로운 페이지 를 렌 더 링 합 니 다.다음 그림 에서 보 듯 이 상호작용 과정 은 주로 몇 가지 순환 으로 구성 된다.

 AngularJS      Javascript   ，               。    Javascript context      ，       Javascript context，     AngularJS context。    AngularJS context         Angular data-binding、exception handling、property watching   ，       （    Javascript  、        、      ）Angular        ，    AngularJS   $apply()          AngularJS context ， Angular          。
    ，                         ？

1.우선,브 라 우 저 는 계속 감청 상태 에 있 습 니 다.이벤트 가 발생 하면 이벤트 quue 에 추 가 됩 니 다.이벤트 quue 의 이 벤트 는 하나씩 실 행 됩 니 다.2.이벤트 quue 의 이벤트 가 apply()에 싸 여 있 으 면 AngularJS 의 context 에 들 어 갑 니 다.여기 fn()은 AngularJS 의 context 에서 실행 하고 자 하 는 함수 입 니 다.3.AngularJS 는 fn()함 수 를 실행 합 니 다.보통 이 함 수 는 응용 상 태 를 바 꿉 니 다.4.그리고 AngularJS 는 두 개의 작은 순환 으로 구 성 된 digest 순환 에 들 어 갑 니 다.하나의 순환 은 digest 순환 을 처리 하 는 데 사 용 됩 니 다.하나의 순환 은 evalAsync 대기 열 을 처리 하 는 데 사 용 됩 니 다.하나의 순환 은 watch 목록 을 처리 하 는 것 입 니 다.(일부 표현 식 의 집합 입 니 다.변경 이 발생 하면 watch 목록(일부 표현 식 의 집합 입 니 다.변경 이 발생 하면 watch 함수 가 호출 됩 니 다)digest 순환 은 digest 순환 이 evalAsync 대기 열 이 비어 있 고 watch 목록 도 비어 있다 는 것 을 알 고 있 을 때,즉 model 은 더 이상 변화 가 없습니다.5.AngularJS 의$digest 순환 이 끝나 면 전체 실행 은 AngularJS 와 Javascript 의 context 에서 벗 어 나 고 이 어 브 라 우 저 는 데이터 가 변 경 된 보 기 를 다시 보 여 줍 니 다.

    ，             ：


<html ng-app>
  <head>
    <script src="angular.js">script>
  head>
  <body>
    <input ng-model="name">
    <p>Hello {{name}}!p>
  body> 
html>

이 코드 와 이전 코드 의 유일한 차 이 는 사용자 의 입력 을 받 기 위해 input 가 있다 는 것 이다.브 라 우 저 로 이 html 파일 에 접근 할 때 input 의 ng-model 명령 은 input 에 keydown 이 벤트 를 묶 고 name 변수 에 watch 를 제안 하여 변수 값 이 바 뀌 었 다 는 알림 을 받 습 니 다.대화 단계 에서 주로 다음 과 같은 일련의 사건 이 발생 합 니 다.1.사용자 가 키보드 의 특정한 키 를 눌 렀 을 때(예 를 들 어 A)input 의 keydown 사건 을 촉발 합 니 다.2.input 의 명령 은 input 의 값 변 화 를 감지 하고 apply("name="A")를 호출 하여 AngularJS 의 context 에 있 는 model 을 업데이트 합 니 다.3.AngularJS 는'A'를 name 에 할당 합 니 다.4.digest 순환 이 시작 되 고 digest 순환 이 시작 되 며 watch 목록 에서 name 값 의 변 화 를 감지 한 다음{{name}표현 식 을 알려 DOM 을 업데이트 합 니 다.5.AngularJS 의 context 를 종료 하고 자 바스 크 립 트 의 context 에서 keydown 이 벤트 를 종료 합 니 다.6.브 라 우 저가 보 기 를 다시 렌 더 링 합 니 다.
마지막 으로 이 블 로그 가 AngularJS 가 뒤에서 하 는 일 을 잘 이해 하 는 데 도움 이 되 기 를 바 랍 니 다.만약 정확 하지 않 은 곳 이 있다 면 지적 하여 바로잡아 주 십시오!
http://www.cnblogs.com/penghongwei/p/3444601.html

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Chrome Extension 2 편 -- 통신

메모: 만약 여러 페이지 가 onMessage 사건 을 감청 한다 면, 어떤 사건 에 대해 서 는 sendResponse () 를 처음 호출 하 는 것 만 성공 적 으로 응답 할 수 있 고, 모든 다른 응답 은 무 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Angular1

좋은 웹페이지 즐겨찾기