AngularJS | 모듈 및 컨트롤러 | 간단한 데이터베이스 생성


이번에는 데이터를 다루는 예제를 만들어 보자. 컨트롤러에는 배열로 데이터를 보관해 두었다가 거기서 데이터를 얻어와서 표시하는 것이다. 아무튼, 간단한 데이터베이스를 사용하는 경우의 예제이다.

HTML 화면 표시

먼저, HTML 파일을 만든다. 아래 예제 코드를 올려 두었다. 아래와 같이 작성하여 저장한다.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
    <style>
    body { color:gray; }
    h1 { font-size:18pt; font-weight:bold; }
    span.label { display:inline-block;width:50px; color:red; }
    input { width:100px; }
    .msg { font-size:14pt; font-weight:bold;color:gray; }
    </style>
</head>
<body ng-app="myapp" ng-init="num=0">
    <h1>데이터 표시</h1>
    <p>ID번호를 입력해 주세요.</p>
    <div ng-controller="HeloController as ctl">
    <div class="input">
        <span class="label">ID:</span>
        <input type="text" ng-model="num">
        <button ng-click="ctl.doAction(num)">click</button>
    </div>
    <p class="msg">{{ctl.getData()} }</p>
    </div>
</body>
</html>

여기에서는 3개 곳에 AngularJS의 기능이 사용되고 있다. 간단하게 정리하면 아래와 같다.

myapp 모듈 설정

<body ng-app="myapp" ng-init="num = 0">

먼저 <body>에 myapp 모듈을 설정한다. 그리고 num이라는 변수를 초기화한다. 이것으로 <body>에서 myapp 모듈의 기능을 사용할 수 있게 되었다.

num 설정

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

준비한 변수 num은 여기에서 사용하고 있다. 입력 필드의 값을 관리하는 모델로 num을 설정한다. 이것으로 입력된 값이 num에 항상 보관되게 된다.

getData 데이터 표시

<p class="msg">{{ctl.getData()}}</p>

이것이 데이터를 꺼내 표시하는 부분이다. HeloController의 “getData"라는 메소드를 호출한다. 이 메소드는 현재 입력된 번호의 데이터를 텍스트로 반환한다. 이것으로 필요한 데이터가 언제든지 여기에 표시된다.

클릭시 동작 설정

<button ng-click="ctl.doAction(num)">click</button>

이번에 새롭게 등장한 속성이 “ng-click"이다. 이것은 onclick 속성에 해당되는 것으로, 클릭했을 때 처리를 실행시키는 것이다. <p class="msg">에 설정되어 있는 {{ctl.getData()}}이 실시간으로 표시가 업데이트 되지만, 때로는 “클릭하면 작업 실행"하는 방식도 필요할 것이다.

모듈 및 컨트롤러 정의

스크립트를 작성한다. 아래에 예제를 올려 두었다. 파일명은 script.js으로 저장한다.

var myapp = angular.module('myapp',[]);
myapp.controller('HeloController',
    function(){
        this.count = 0;
        this.data = [
            [0,'nobody','nodata...'],
            [1,'성진','sungjin@foryou'],
            [2,'원석','wonsuck@flower'],
            [3,'병호','byeongho@devkuma.com']            
        ];
        this.getData = function(){
            return this.data[this.count][0] + ': ' + 
                this.data[this.count][1] + ', ' + 
                this.data[this.count][2] + '.';
        };
        this.doAction = function(num){
            this.count = num;
        }
    }
);

작성되면 접속해 본다. 입력 필드에 1 ~ 3의 번호를 입력하면 해당 번호의 데이터가 표시된다. 데이터를 저장하고 있는 data 속성의 내용을 추가하면 더 많은 데이터를 처리할 수 있다.

이번에는 module 메소드로 모듈을 만든 것을 변수에 대입하고, 그 변수에서 controller 메소드를 호출하도록 되어 있다. 뭐, 어떻게 작성하여도 상관은 없지만, 모듈에 여러 컨트롤러를 지정해야 하는 경우는 이렇게 변수로 만들어 작성하는 것이 편하다.

여기에서는 this.data에 배열로 데이터를 저장하고 있다. 이것은 2차원 배열이고, ID 번호, 이름, 이메일 주소 등의 값이 저장되어 있다. getData 메소드는 count 속성에 설정된 인덱스 번호의 데이터를 꺼내 텍스트에 만들어 return한다.

ng-click으로 실행 시키려면?

이번에는 getData 외에 “doAction"이라는 메소드도 만들었다. 이 메소드는 ng-click으로 호출되면 처리된다.

여기서에서 수행하고 있는 것은 인수에 num을 count 속성에 설정하는 단순히 처리이다. 이 처리로 count 값이 변경되면, 템플릿에 {{ctl.getData()}}를 지정되어 있는 표시가 즉시 업데이트되어 변경한 데이터로 바뀐다.

표시 부분은 AngularJS가 자동으로 업데이트되기 때문에 액션 메소드는 단순히 설정을 저장하고 있는 값을 재 작성만하면 된다. 보통 JavaScript의 액션 처리와는 상당히 다른 느낌이다는 것을 알 수 있다.