-
[AngularJS] 3. AngularJS 부트스트랩(Bootstrap) - AngularJS 강좌Web/AngularJS 2016. 1. 15. 16:52
AngularJS 부트스트랩(Bootstrap)
1. ng-app 지시자를 이용한 부트스트랩
AngularJS 웹 app이 되는 조건은 단순히 Script 태그로 angular.js 파일을 로드하는 것으로 충족되는 것이 아닙니다. 특정 태그에 ng-app 속성을 추가해서 AngularJS 부트스트랩을 적용해야 합니다.
아래 예제는 간단한 AngularJS 웹 app 예제입니다.
* simpleajs.html
123456789101112<!DOCTYPE html><html ng-app><head><meta charset="UTF-8"/><script src="libs/Angular/angular.js"></script><title>Simple Angular JS App</title></head><body ng-init="name='AngularJS'"><h1>Hello {{name}} world !</h1></body></html>cs ng-app은 AngularJS 웹 app의 범위를 제한하는 지시자이자 제한자입니다. ng-app 지시자를 추가한 노드가 루트 노드가 되어 하위 노드들은 AngularJS의 기능을 사용할 수 있게 됩니다.
한 가지 주의할 점은 Java 나 C의 main 과 마찬가지로, ng-app 지시자는 딱 한 번만 나와야 합니다. 아래 예제를 봅시다.
123456<div ng-app><h1>{{1+2}}</h1></div><div>{{1+2}}</div>cs 위 예제에서 ng-app 지시자가 들어간 div 태그에서는 3을 출력하고, 아래 div 태그는 {{1+2}}를 그대로 출력하게 됩니다. 즉, AngularJS 표현식을 인식하지 않는 영역으로 html을 출력하게 되는 겁니다.
그렇다면 ng-app을 추가하면 웹에서 어떻게 처리하는지 알아보도록 하겠습니다.
AngularJS의 부트스트랩핑 과정은 아래와 같습니다.
1. ng-app에 값으로 주어진 모듈을 로드
2. app에 유일한 injector를 생성
3. ng-app 지시자가 적용된 정적 DOM을 루트로 하여 컴파일, 컴파일 시 $rootScope를 전달하고 정적 DOM에 AngularJS를 적용되어 동적 DOM이 만들어지면 브라우저가 렌더링하여 뷰를 출력
다음 그림은 부트스트랩핑 과정에 대해 설명한 그림입니다.
[출처: AngularJS Doc]
2. 자바스크립트 API를 이용한 부트스트랩
앞에서 본 바와 같이 ng-app 지시자를 이용하면 AngularJS가 자동으로 부트스트랩됩니다. 다른 방법으로 수동으로 AngularJS를 부트스트랩할 수 있는 API를 자바스크립트가 제공합니다.
12angular.bootstrap(DOM Object)cs 예시로 만든 html 문서가 있고, 이 중에서 app1만 부트스트랩을 적용하는 예제입니다.
123456789101112<div id="app1">{{1+2}}</div><div id="app2">{{3+4}}</div><script>angular.element(document).ready(function() {angular.bootstrap(document.getElementById('app1'));});</script>cs 수동으로 부트스트랩하면 자동으로 부트스트랩할 때와 달리 하나의 페이지에 여러 개의 DOM을 부트스트랩할 수 있습니다. 또한, angular.bootstrap 메소드는 여러번 부트스트랩을 적용할 수 있습니다.
이와 같이 한 페이지에서 서로 다른 AngularJS 웹 app을 만들고자 할 때 사용하거나 DOMContentLoaded 이벤트가 발생한 시점이 아닌 별도의 시점에서 AngularJS를 부트스트랩할 때 사용할 수 있습니다.
* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌 (0) 2016.04.01 [AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 2 - AngularJS 강좌 (0) 2016.02.06 [AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 1 - AngularJS 강좌 (0) 2016.01.29 [AugularJS] 2. AugularJS 살펴보기 - AngularJS 강좌 (0) 2016.01.15 [AngularJS] 1. 프로젝트 및 개발환경 구성 - AngularJS 강좌 (0) 2016.01.15 [AngularJS] 13.5 API - AngularJS 강좌 (0) 2015.11.20
