AngularJS | AngularJS 기본 | 예제를 만들어 보자!


여기에서는 AngularJS를 사용하여 간단한 예제를 만들어 보겠다.

일단은 설치 및 개발 환경은 필요 없다. JavaScript를 편집 할 수 있는 적당한 편집기를 사용한다. 작업 서버의 준비도 우선 없어도 된다. HTML 파일을 그대로 브라우저에서 열어도 동작한다. Ajax 이용으로 서버 액세스 필요하게 되면 그 때 생각하면 된다.

그럼 아래에 간단한 예제 코드를 올려 두었다. 텍스트 에디터를 열어서, 작성해서 .html 확장자로 적당한 위치에 저장한다.

<!DOCTYPE html>
<html ng-app>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div>
    <p>input:<input type="text" ng-model="msg"></p>
    <p>you typed: {{msg}}.</p>
    </div>
</body>
</html>

그리고 브라우저에서 열어본다.

이 예제에서는 입력 필드가 하나만 제공되고 있다. 여기에 텍스트를 입력하면 실시간으로 아래의 메시지에 표시가 된다. 아주 간단한 것이지만, AngularJS의 동작은 어떻게든 알 수 있을 것이다.

AngularJS을 사용하고 있다고 하는데 보면 알 수 있듯이 JavaScript 코드 같은 것은 전혀 없다. 사실 AngularJS의 큰 장점은 “JavaScript 만 확장하는 것은 아니다"라는 점이다. AngularJS는 HTML 자체를 확장한다. 그럼 어떻게 되어 있는지 자세히 살펴 보도록 하자.

AngularJS 로드

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

AngularJS는 일반적으로 Google에서 로드하여 사용한다. 위와 같이 <script> 태그를 사용하여 다른 AngularJS를 사용할 수 있다.

이 ajax.googleapis.com라는 사이트는 Google에서 제공하는 CDN 사이트이다. CDN은 “Code Delivery Network"의 약자로 널리 사용되고 있는 오픈 소스 JavaScript 코드를 배포하는 사이트이다. jQuery와 Prototype과 같은 주요 오픈 소스 JavaScript 라이브러리는 대부분 여기에서 배포되고 있다. 지정된 라이브러리의 주소를 src에 지정하기 만하면 언제든지 라이브러리를 사용할 수 있게 된다.

모델 및 마크업

  앞에 예제에서 텍스트를 작성하고 실시간으로 표시가 업데이트되는 것은 “모델"과 “마크업"이라는 것의 작용에 의한 것이다. 그럼 예제에서 사용되고 있는 AngularJS의 기능에 대해 설명하겠다.

응용 프로그램 지정

<html ng-app>

먼저 <html> 태그에 ng-app라는 것이 지정되어 있다. 이것은 “이 태그의 내부가 AngularJS에 의해 동적으로 연결된다"라는 것을 의미하고, app는 응용 프로그램을 의미한다.쉽게 말하면, “이 태그가 AngularJS 애플리케이션이다"라는 것을 의미하는 것이다.

여기에서는 <html> 태그에 지정하였는데, 이것은 HTML 전체를 AngularJS 연결하는 대상으로 하고 있기 때문이다. <body>로 연결되면 그 안에만 대상이 된다. 혹은 더 나중에 설명하겠지만, ng-app는 이름을 붙여서 여러 설정할 수 있기에 <body> 안의 여러 태그에 다른 이름의 ng-app을 지정할 수도 있다.

아무튼, 지금은 “<html>이나 <body>ng-app를 지정해 놓으면 AngularJS를 사용할 수 있게 된다"라는 것만 기억하도록 한다.

모델의 설정

<input type="text" ng-model="msg">

페이지 본문에 나오는 첫번째 핵심은 이 부분이다. “ng-model"라는 것이 지정되어 있다. 이것은 “디렉티브(directive)“라는 것이다. 디렉티브는 AngularJS에 의해 새롭게 추가된 태그의 속성이라고 생각하면 된다.

이 ng-model이라는 디렉티브는 “모델"이라는 것을 설정한다. 모델은 Web 페이지에 표시되는 데이터를 나타내기 위한 것이다. 예를 들어, 여기에 지정된 ng-model="msg"<input type="text"> 값이 “msg"라는 모델과 연관된 것임을 나타낸다.

마크업 사용

이 모델의 값은 여러 곳에서 사용할 수 있다. 여기에서는 그 다음와 같은 형태로 작성되어 있다.

<p>you typed: {{msg}}.</p>

{{OO}}라고 작성 법은 AngularJS에 의해 새롭게 마련된 **마크업(markup)**이다. 이 마크업은 수식이나 값을 HTML에 넣기 위하여 이용한다. 여기에서는 {{msg}}라고 되어 있는데, 이는 msg 값이 여기에 표시되게 된다.

이 모델과 마크업에 의해 모델에 설정된 필드의 값을 입력하여 변경이 되면, 마크업 표시가 즉시 바뀌는 동작을 한다. 이 두 가지 요소는 AngularJS를 사용할 때의 가장 기초적인 것이므로, 꼭 기억해 두기로 한다.