Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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 31
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 3. AngularJS 부트스트랩(Bootstrap) - AngularJS 강좌 본문

AngularJS_2

[AngularJS] 3. AngularJS 부트스트랩(Bootstrap) - AngularJS 강좌

날아올라↗↗ 2016. 6. 14. 13:59
728x90

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 프로그래밍'을 바탕으로 작성하였습니다.

728x90
저작자표시

'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
'AngularJS_2' Related Articles more