03. AngularJS 부트스트랩

1. AngularJS 부트스트랩

- AngularJS는 단순한 HTML 페이지를 AngularJS 웹 어플리케이션으로 동작하게 하기 위한 프로세스가 존재한다.

이를 AngularJJS 부트스트랩이라고 할 수 있다. AngularJS 부트스트랩은 크게 ng-app 지시자를 이용한 부트스트랩과 

angular.bootstrap 메서드를 이용한 부트스트랩으로 나눌 수 있다.

1) ng-app을 통한 부트스트랩

ng-app은 AngularJS 웹어플리케이션의 범위를 제한한다. ng-app 지시자를 추가한 노드가 루트 노드가 되며 하위 노드들은 

AngularJS의 기능을 사용할 수 있게 된다.

주의할 사항은 ng-app 지시자는 해당 페이지에서 한 번만 사용해야 한다는 점이다.

AngularJS 부트 스트랩 : 최초에 AngularJS는 AngularJS 스크립트가 실행되고 DOMContentLoaded 이벤트가 발생하여 document.readyStat가

'complete' 상태가 되면 HTML 페이지를 읽으면서 ng-app속성을 찾는다. 그리고 ng-app 속성을 반견하면 다음과 같은 부트스트랩 절차가 이뤄진다.

① ng-app에 값으로 주어진 모듈을 로드한다.

② 어플리케이션에 유일한 injector를 생성한다.

③ ng-app 지시자가 적용된 정적 DOM을 루트로 하여 컴파일한다. 컴파일 시 $rootScope를 전달하고 앞에서 얘기했듯이 해당 정적 DOM에 AngularJS가 적용되어 동적 DOM이 만들면 

이를 브라우저가 렌더링하여 우리가 보는 뷰가 만들어진다.

2) 자바스크립트 API를 이용한 부트스트랩

 - AngularJS는 수동으로 AngularJS를 부트스트랩할 수 있는 API를 제공한다.

  수동으로 특정 DOM을 부트스트랩하는 API : angular.bootstrap(DOM 객체)

<script>

 angular.element(document).ready(function(){

angular.bootstrap(document.getElementById('app1')); 

angular.bootstrap(document.getElementById('app2'));

 });

</script>

 

 <div id="app1">

  {{1+2}}

 </div>

 <div id="app2">

  {{1+2}}

 </div>

{{1+2}}

{{1+2}}

{{1+2}}

{{1+2}}

- 수동으로 부트스트랩하면 자동으로 부트스트랩할 때와 달리 하나의 페이지에 여러 개의 DOM을 부트스트랩할 수 있다.

ng-app 지시자는 웹 페이지 전체에서 단 한 번만 사용할 수 있었다. 하지만 angular.bootstrap 메서드는 단 한 번만 호출해야만 한다는 규칙은 없다.

- 수동 부트스트랩은 위와 같이 한 페이지에서 서로 다른 AngularJS 웹 어플리케이션을 만들고자 할 때 사용하거나 DOMContentLoaded 이벤트가 발생한 시점이 아닌

 별도의 시점에서 AngularJS를 부트스트랩할 때 사용할 수 있다.