[앵귤러] 앵귤러(Angular)js 수명주기

저번 글에서는 간단하게 예제를 중심으로 개념을 설명해보았다. 

이번엔 그렇다면 과면 앵귤러 js는 어떤 흐름으로 동작되는지를 살펴보도록 하겠다. 

1. 앵귤러JS 수명주기 

ㄱ. 부트스트랩(bootstrap) 단계

앵귤러 js 수명주기의 첫번째 단계는 부트 스트랩 단계이다. 

앵귤러 js자바스크립트 라이브러리가 브라우저에 로딩될 때 발생한다. 

앵귤러 js는 자신만의 컴포넌트들을 초기화하고 난 이후에, ng-app지시자와 관련된 다른 모듈을 초기화 한다. 

모듈이 로딩되면 의존성이 사용하는 모듈로 주입되고 모듈내에서는 코드동작이 가능하다. 

웹 페이지 내에서 앵귤러 

ㄴ. 컴파일 단계

앵귤러js 수명주기의 두번째 단계는 HTML 컴파일 단계다. 웹페이지가 로딩됐을 때 DOM의 정적 폼이 브라우저에 로딩된다. 컴파일 단계에서 정적 DOM은 앵귤러 JS 뷰를 나타내는 동적 DOM으로 변경된다. 

이 단계는 2부분으로 구성된다. 

정적 DOM을 순회하고 모든 지시자를 수집해야하는 부분과, 앵귤러 JS 빌트인 라이브러리 또는 커스텀 지시자 코드의 적합한 자바스크립트 기능으로 링크(결합)을 하는 부분이다. 지시자들은 동적 또는 라이브 뷰를 생성하기 위해서 범위를 가지고 결합된다. 

ㄷ. 런타입 데이터 바인딩 단계

앵귤러 애플리케이션의 마지막 단계는 런타입 단계이며 이는 사용자가 웹페이지를 다시 로드하거나, 탐색할 때까지 지속된다. 이 때, 범위의 변화가 발생하면 뷰에 반영되고, 뷰의 변경은 범위에 직접 업데이트된다. 

범위는 뷰를 위한 데이터의 단일 소스가 된다. 

앵귤러JS는 DOM에 한번만 컴파일하고 필요할 때만 컴파일 된 템플릿을 링크한다.