AngularJS의 기본 형태
AnagularJS만의 독특한 형태에 대해서 한번 살펴보자.
AnagularJS를 처음 접했을 때 다른 JS 라이브러리와 눈에 띄게 다르다고 느껴지는 부분은, HTML 태그 등에 ng-app 라는 속성이 포함되어 있다는 것과, AnagularJS 라이브러리를 로드한다는 것, 마지막으로 {{ }} 로 감싸진 Anagular 표현식이 존재한다는 것 정도일지도 모른다.
하지만 실제 AngularJS의 세계는 jQuery에 익숙해져 있는 사람들이 바로 이해할 수 있을정도로 간단하진 않다. :)
AnagularJS의 강점은, 양방향 데이터바인딩 구현, 자바스크립트 상에서 MVC(혹은 MVVM) 패턴을 구현, 다이렉티브로 태그를 커스터마이즈 가능하다는 점 등으로 알려져 있다. 실제로 사용하다보면, AngularJS가 가지고 있는 구조 자체의 단단함으로 인해 학습이 필요한 부분이 많지만, 또 그 단단함으로 인해 여러 사람이 협업할 때 구조 내에서 코딩을 하기 때문에 코드의 질이 어느정도 보장되고, 구조적인 틀이 제공되기 때문에 대규모 웹 어플리케이션을 개발할 때 불필요한 고민과 작업을 줄여줄 수 있다는 점 역시 큰 장점으로 다가오게 된다.
이건 앞으로 하나하나 살펴보기로하고, 간단한 예제를 통해 Anagular의 기본 형태를 이해해보자.
<html ng-app> <!-- ng-app 지시어는 Anagular를 로드하고 초기화시킨다. Anagular는 ng-app와 같은 대쉬가 포함된 형태의 작명법을 지원한다. html 태그에 ng-app 속성을 부여하면, 하위 모든 요소는 모두 Anagular 어플리케이션으로 다뤄진다. --> <head> <meta charset="utf-8"> <title>My HTML File</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"> </script> <!-- 이 태그는 당연하게도 Anagularjs를 로드하고, 더불어 HTML페이지가 모두 로드된 후에 브라우저에 의해 실행되는 콜백을 등록한다. 콜백이 실행되면, Anagular는 ng-app 지시어를 찾게된다. 다이렉티브를 찾으면 ng-app 지시어가 정의된 요소가 존재하는 어플리케이션 DOM의 최상위에 부트스트랩을 건다. --> </head> <body> <p>Nothing here {{'yet' + '!'}}</p> <!-- {{ 와 }}에 의해 감싸진 부분은 Anagular 표현식을 나타낸다. 여기에서는 단순하게 yet과 !를 더하는 기능만을 수행한다. Anagular 표현식은 일종의 자바스크립트 호환 코드 스니펫으로 현재 모델 범위 컨텍스트 안에서 Anagular에 의해 평가된다. --> </body> </html>
결과는 Nothing here yet! 이라는 글자가 출력된다.
아래의 jsFiddle을 통해 간단하게 테스트해 볼 수 있다!
위의 예제는 실제적으로 설정해주어야하는 많은 부분을 생략한 간소화된 버전이다.
실제적으로 많이 활용되는 기본 형태의 Anagular앱은 아래와 같다.
이번에는 AngularJS 어플리케이션이 구동(로딩)되는 과정을 위의 소스들을 참고해가며 살펴보자.
AngularJS의 로딩의 첫 과정은 ng-app 지시어를 통해 대부분 매우 쉽고 간편하게 이루어진다. 하지만 일부의 경우 스크립트 로더를 사용하는 형태로 수동적으로 어플리케이션을 시작할 수 있다. (IE 등에서 호환성 문제로 이러한 스크립트 로더 형태가 필요해질 수 있다)
