| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 야구게임
- while
- 전자정부
- 로또
- full text indexing
- 전체
- 다운캐스팅
- 페이징
- 추상클래스
- 자바
- Login with OAuth Authentication
- 스프링
- IBatis procedure
- Random
- Validations
- 이클립스
- 자바 야구게임
- 형변환
- jquery
- 상속예제
- 업캐스팅
- 상속
- 단축키
- 가변인자
- 25가지 효율적인 sql작성법
- 전체텍스트
- 다형성
- angular2
- Full text
- Today
- Total
nalaolla
[AngularJS] 3. AngularJS 부트스트랩(Bootstrap) - AngularJS 강좌 본문
AngularJS 부트스트랩(Bootstrap)
1. ng-app 지시자를 이용한 부트스트랩
AngularJS 웹 app이 되는 조건은 단순히 Script 태그로 angular.js 파일을 로드하는 것으로 충족되는 것이 아닙니다. 특정 태그에 ng-app 속성을 추가해서 AngularJS 부트스트랩을 적용해야 합니다.
아래 예제는 간단한 AngularJS 웹 app 예제입니다.
* simpleajs.html
1 2 3 4 5 6 7 8 9 10 11 12 | <!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 지시자는 딱 한 번만 나와야 합니다. 아래 예제를 봅시다.
1 2 3 4 5 6 | <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를 자바스크립트가 제공합니다.
1 2 | angular.bootstrap(DOM Object) | cs |
예시로 만든 html 문서가 있고, 이 중에서 app1만 부트스트랩을 적용하는 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 12 | <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 프로그래밍'을 바탕으로 작성하였습니다.
'AngularJS_2' 카테고리의 다른 글
| [AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌 (0) | 2016.06.14 |
|---|---|
| [AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 2 - AngularJS 강좌 (0) | 2016.06.14 |
| [AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 1 - AngularJS 강좌 (0) | 2016.06.14 |
| [AugularJS] 2. AugularJS 살펴보기 - AngularJS 강좌 (0) | 2016.06.14 |
| [AngularJS] 1. 프로젝트 및 개발환경 구성 - AngularJS 강좌 (0) | 2016.06.14 |