[AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 2

[AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 2 - AngularJS 강좌

Web/AngularJS 2016. 2. 6. 17:06

템플릿 시스템과 바인딩

5. 조건적인 데이터 표현을 위한 템플릿

템플릿을 작성하다보면 조건에 따라 다른 코드를 작성하고 싶을때가 있습니다. 자바스크립트에서는 이렇게 특정 조건일 때 특정 코드 블록을 지정하는 데 조건문을 이용합니다.

AngularJS의 템플릿에서도 자바스크립트의 switch와 if문과 비슷한 기능의 지시자를 제공합니다. ng-switch와 ng-if가 이에 해당합니다. 비슷한 지시자로 ng-show와 ng-hide 지시자가 있습니다. 이 두 지시자는 조건적으로 적용된 DOM의 CSS 속성 중 display 속성을 제어하는 지시자입니다.

다음은 ng-switch 사용법입니다.

...

</ANY>

ng-switch 문은 어떠한 HTML 태그에서도 사용할 수 있으며 부모 요소와 자식 요소가 필요합니다. 부모 요소에서 ng-switch="표현식"을 속성으로 작성 할 수 있는데 표현식에는 $scope의 속성명이 오게 됩니다. 가령 ng-switch="value"라고 작성하면 $scope.value의 값이 조건으로 주어지는 것입니다. 이때 자식 요소에서는 ng-switch-when="조건 일치 값"을 작성할 수 있습니다. 가령 $scope.value의 값이 "matchValue1"이고 ng-switch-when="matchValue1"이라고 자식 요소에 작성되어 있으면 해당 자식 요소가 실제로 화면에 보이게 됩니다.

다음은 상단에 있는 텍스트에 따라 아래에 있는 색을 선택하여 바꾸는 예제입니다.

* ngexam.html

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
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
            }
            .red {
                background-color: red;
            }
            .green {
                background-color: green;
            }
            .blue {
                background-color: blue;
            }
            .black {
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="radio" ng-model="color" value="red">빨간색<br/>
            <input type="radio" ng-model="color" value="green">녹색<br/>
            <input type="radio" ng-model="color" value="blue">파란색<br/>
            
            <div ng-switch="color">
                <div ng-switch-when="red" class="box red"></div>
                <div ng-switch-when="green" class="box green"></div>
                <div ng-switch-when="blue" class="box blue"></div>
                <div ng-switch-default class="box black"></div>
            </div>
        </div>
    </body>
</html>
Colored by Color Scripter
cs

이제 ng-if 지시자를 살펴봅시다. 다음은 ng-if 지시자의 사용법입니다.

...

</ANY>

ng-if는 표현식 결과값의 참/거짓 여부에 따라 해당 요소를 없애거나 생성하는 지시자입니다.

아래 예제를 통해서 ng-if를 알아봅시다.

* ngifexam.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    </head>
    <body>
        약관에 동의: <input type="checkbox" ng-model="checked" ng-init="checked=false" />
        <br/>
        동의하면 다음으로 진행됩니다.
        <button ng-if="checked">다음</button>
    </body>
</html>
Colored by Color Scripter
cs

6. 비지니스 로직을 처리하기 위한 템플릿

AngularJS에서는 템플릿의 특정 부분을 처리하는 자바스크립트 함수를 선언할 수 있습니다. 즉 화면 어느 한 부분의 애플리케이션 로직에 대한 코드를 특정 자바스크립트 함수에서 작성해야 합니다. 앞에서 본 것처럼 화면에서 데이터를 반복해서 출력하거나 조건에 따라 출력하는 코드는 모두 템플릿에 작성하면 됩니다.

하지만 데이터를 가공하거나 서버에 데이터를 저장하고 서버로부터 데이터를 불러오는 등의 애플리케이션 로직에 해당하는 코드는 자바스크립트로 작성해야 합니다. 그래서 템플릿의 특정 부분을 처리하고 자바스크립트 함수 이름을 템플릿에 명시하게 합니다.

이러한 함수를 컨트롤러 함수라 하고 ng-controller 지시자를 이용해 템플릿이 컨트롤러 함수를 참조할 수 있게 해줍니다.

템플릿에서 컨트롤러 함수를 사용하려면 ng-controller 지시자를 특정 요소의 속성으로 작성하면 됩니다. 그러면 해당 요소와 자식 요소를 모두 포함하여 컨트롤할 대상 함수를 지정하게 되고 대상 컨트롤러 함수에서 애플리케이션의 로직을 구현할 수 있습니다. 다음은 ng-controller의 사용법입니다.

...

<ANY>

여기서 표현식은 전역적(Global)으로 접근할 수 있는 자바스크립트 함수의 이름이거나 모듈로 등록된 컨트롤러 함수 이름이거나 현재 scope에서 접근할 수 있는 함수의 이름입니다.

다음 예제는 고객 목록 중에서 18세 미만인 고객을 별도로 보여주는 예제입니다.

* ngctrlexam.html

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
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html ng-app="ctrl">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script>
            var app = angular.module("ctrl", []);
            app.controller("customerCtrl", function($scope) {
                var customerList = [
                    {name: 'Jane', age: 7}, {name: 'Jolie', age: 21}
                ];
                var youngCustomerList = [];
                
                angular.forEach(customerList, function(value, key) {
                    if (value.age < 18) {
                        youngCustomerList.push(value);
                    }
                });
                
                $scope.customerList = customerList;
                $scope.youngCustomerList = youngCustomerList;
            });
        </script>
    </head>
    <body ng-controller="customerCtrl">
        <div>
            고객목록
            <ul>
                <li ng-repeat="customer in customerList">
                    [{{$index + 1}}] 고객이름: {{customer.name}}, 고객나이: {{customer.age}}
                </li>
            </ul>
        </div>
        <div>
            18세 미만 고객
            <ul>
                <li ng-repeat="youngCustomer in youngCustomerList">
                    [{{$index + 1}}] 고객 이름: {{youngCustomer.name}}, 고객 나이: {{youngCustomer.age}}
                </li>
            </ul>
        </div>
    </body>
</html>
Colored by Color Scripter
cs

예제 코드를 보면 customerCtrl 컨트롤러 함수가 정의되어 있습니다. 해당 컨트롤러 함수에서는 고객 목록이 정의되어 있으며, 고객 목록 중 나이가 18세 미만인 고객만 별도의 고객으로 추려내고 있습니다.

그리고 해당 고객 목록을 인자로 받은 $scope에 대입하고 있습니다. 이렇게 $scope에 속성으로 대입해야 컨트롤러 함수와 연결된 템플릿의 요소에서 표현식을 이용해 접근할 수 있습니다.

7. 폼과 유효성 검사를 위한 템플릿(폼/입력 지시자)

사용자와 서버가 데이터를 주고받기 위해 HTMl에서는 <form> 요소를 제공합니다. 이 <form> 요소에는 <input>, <select>, <textarea> 요소를 자식 요소로 사용할 수 있습니다. 하지만 폼 양식을 서버로 제출하기 전에 사용자가 입력한 값을 검증해야 할 때가 종종 있습니다.

AngularJS는 유효성 검증을 손 쉽게 처리할 수 있게 폼 양식 유효성 검증과 관련된 지시자를 제공합니다. 그럼 <form> 요소와 <input>, <select>, <textarea> 요소에서 사용할 수 있는 지시자를 살펴보도록 하겠습니다.

텍스트 타입 사용법

<input type="text" ng-model="문자열" name="문자열" ng-required="문자열" ng-minlength="숫자" ng-maxlength="숫자" ng-pattern="문자열" ng-change="문자열"

- ng-model: 바인딩 대상이 되는 모델명

- name: 폼에서 사용하는 이름

- ng-required: 필수 입력 여부

- ng-minlength: 최소 글자 수

- ng-maxlength: 최대 글자 수

- ng-pattern: 입력된 값과 비교될 정규 표현식이며 /정규표현식/과 같은 값이 요구됩니다.

- ng-change: 사용자의 입력이 발생할 때 실행될 표현식

다음 예제는 이름과 핸드폰 번호를 입력하는 <input> 요소의 유효성을 검증하여 그 결과를 보여주는 예제입니다.

* ngvalidexam.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html ng-app>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    </head>
    <body>
        <form name="sampleFrm" ng-init="name = 'Black Jack'">
            이름: <input type="text" name="name" ng-model="name" ng-maxlength="3" ng-required="true"/>
            <span class="error" ng-show="sampleFrm.name.$error.required">필수 입력</span>
            <br/>
            핸드폰 번호: <input type="text" name="tel" ng-model="tel" ng-pattern="/^\d{3}-\d{3,4}-\d{4}$/">
            <span class="error" ng-show="sampleFrm.tel.$error.pattern">000-0000-0000</span>
            <br/>
            <p>사용자 정보: {{name}}/{{tel}}</p>
            <p>sampleFrm.name.$valid = {{sampleFrm.name.$valid}}</p>
            <p>sampleFrm.name.$error = {{sampleFrm.name.$error}}</p>
            <p>sampleFrm.tel.$valid = {{sampleFrm.tel.$valid}}</p>
            <p>sampleFrm.tel.$error = {{sampleFrm.tel.$error}}</p>
            <p>sampleFrm.$valid = {{sampleFrm.$valid}}</p>
            <p>sampleFrm.$error.required = {{!!sampleFrm.$error.required}}</p>
        </form>
    </body>
</html>
Colored by Color Scripter
cs

체크박스 타입 사용법

- ng-model: 바인딩 대상이 되는 모델명

- name: 폼에서 사용하는 이름

- ng-true-value: 체크박스를 체크했을 때 바인딩된 모델에 대입할 값

- ng-false-value: 체크박스를 해제했을 때 바인딩된 모델에 대입할 값

- ng-required: 필수 입력 여부

- ng-change: 사용자의 입력이 발생할 때 실행될 표현식

목록 요소 사용법

- ng-model: 바인딩 대상이 되는 모델명

- name: 폼에서 사용할 이름

- ng-required: 필수 입력 여부

- ng-options: 옵션을 나타내기 위한 별도의 표현식

AngularJS에서 제공하는 ng-options 지시자는 위에서 본 바와 같이 ng-repeat처럼 반복적인 데이터를 위한 별도의 표현식을 제공합니다. ~ for ~ in이 기본 구조이고 as 혹은 group by를 같이 사용합니다. 다음은 ng-options 지시자에 사용하는 표현식을 구성하는 요소에 관한 설명입니다.

- array/object: $scope에 있는 배열 또는 객체에 접근하는 표현식

- value: 배열 요소를 가리키는 내부변수 생성 표현식

- label: <option> 요소의 라벨이 될 표현식(예: value.propertyName)

- select: 부모인 <select> 요소에 모델로 바인딩되는 표현식

- group: <optgroup> 요소가 되는 표현식

* ngselectexam.html

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
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html ng-app>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    </head>
    <body>
        <div ng-init="countryList = [{name:'인천', code: 'ICN', continent: 'Asia'},
            {name: '도쿄', code: 'HND', continent: 'Asia'}, 
            {name: '미국', code: 'en', continent: 'Namerica'}]">
            <form name="myRouteFrm">
                <div>
                    출발 국가:
                    <select ng-model="depCountry" 
                        ng-options="country.name for country in countryList" ng-required="true">
                        <option value="">선택하여 주세요</option>
                    </select>
                </div>
                <div>
                    경유 국가:
                    <select ng-model="viaCountry" 
                        ng-options="country.name as country.name for country in countryList">
                        <option value="">선택하여 주세요</option>
                    </select>
                </div>
                <div>
                    도착 국가(대륙 그룹별):
                    <select ng-model="arrCountry" ng-options="country.name group by 
                        country.continent for country in countryList" ng-required="true">
                        <option value="">선택하여 주세요</option>
                    </select>
                </div>
            </form>
            <div>
                <p>출발 국가: {{depCountry.name}} </p>
                <p>경유 국가: {{viaCountry}} </p>
                <p>도착 국가: {{arrCountry.name}} </p>
            </div>
            <div ng-show="myRouteFrm.$invalid">
                출발 국가와 도착 국가는 필수로 선택하여 주세요.
            </div>
        </div>
    </body>
</html>
Colored by Color Scripter
cs

CSS 클래스로 유효성 검증 결과 표현하기

AngularJS는 컨트롤 요소의 유효성 검증 결과를 요소의 CSS 클래스로 알아서 추가해 줍니다. 가령 특정 텍스트 타입의 입력 요소가 필수 입력 요소인데 해당 입력 요소에 값이 주어지지 않으면 AngularJS는 ng-invalid CSS 클래스를 해당 입력 요소에 추가합니다. 그런데 값이 입력되면 ng-invalid CSS 클래스는 없어지고 ng-valid CSS 클래스가 추가됩니다.

이처럼 ng-required나 ng-pattern과 같은 유효성 검사를 위한 속성이 <input> 요소와 같은 컨트롤 요소에 사용되고 유효성 검증에 성공하면 ng-valid CSS 클래스가 실패하면 ng-invalid CSS 클래스가 자동으로 추가되는 것입니다.

그 뿐만 아니라 해당 입력 요소에 사용자 입력이 없으면 ng-pristine CSS 클래스가 추가되고 사용자 입력이 발생하면 ng-dirty CSS 클래스가 추가됩니다.

다음은 앞서 작성한 이름, 핸드폰 번호 유효성 검사에 대한 예제를 다시 작성해보겠습니다.

* cssvalidexam.html

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
<!doctype html>
<html ng-app>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <style type="text/css">
            .ng-invalid {
                border: 3px solid red;
            }
            .ng-valid {
                border: 3px solid green;
            }
            .ng-pristine {
                border-style: solid;
            }
            .ng-dirty {
                border-style: dashed;
            }
        </style>
    </head>
    <body>
        <form name="sampleFrm" ng-init="name = '철구'">
            이름: <input type="text" name="name" ng-model="name" ng-maxlength="3" ng-required="true">
            핸드폰 번호: <input type="text" name="tel" ng-model="tel" ng-pattern="/^\d{3}-\d{3,4}-\d{4}$/">
        </form>
    </body>
</html>
Colored by Color Scripter
cs

이벤트 처리를 위한 템플릿

AngularJS는 HTML 요소에서 발생하는 이벤트에 대한 처리를 자바스크립트를 사용하지 않고 할 수 있게 해줍니다. 가령 특정 요소를 클릭하면 발생하는 클릭 이벤트를 ng-click 지시자를 이요해 이벤트 처리를 할 수 있습니다. 다음은 jQuery를 사용해 특정 버튼을 클릭했을 때 이벤트 처리 코드입니다.

1
2
3
4
5
<div id="button1" class="btn">Click</div>
 
$('div#button1').click(function() {
    clickCount++;
});
Colored by Color Scripter
cs

다음은 AngularJS의 ng-click 지시자를 사용한 코드입니다.

1
2
<div class="btn" ng-click="clickCount++">
 
Colored by Color Scripter
cs

사용자 클릭 이벤트 외에도 마우스오버, 마우스엔터, 키프레스 등 다양한 이벤트를 지원합니다.

다음은 이벤트 지시자의 사용 방법입니다.

...

</ANY>

다음은 다양한 이벤트 처리를 보여주는 예제를 이벤트 지시자를 이용해서 구현한 예제 코드입니다.

* eventexam.html

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
32
33
34
35
36
37
38
39
40
41
42
43
 
<!doctype html>
<html ng-app="event">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <style type="text/css">
            .box {
                width: 100px;
                height: 60px;
                margin: 10px;
                background-color: black;
                color: white;
                text-align: center;
                padding-top: 40px;
            }
        </style>
        <script>
            var app = angular.module("event", []);
            app.controller('mainCtrl', function($scope) {
                $scope.message = "";
                $scope.eventCnt = 0;
                $scope.handleEvt = function(message) {
                    $scope.message = message;
                    $scope.eventCnt++;
                }
            });
        </script>
    </head>
    <body ng-controller="mainCtrl">
        <div>
            <div class="box" ng-click="handleEvt('박스 클릭')">click</div>
            <div class="box" ng-mousedown="handleEvt('박스 mousedown 이벤트')">mousedown</div>
            <div class="box" ng-mouseenter="handleEvt('박스 mouseenter 이벤트')">mouseenter</div>
            <div class="box" ng-mousemove="handleEvt('박스 mousemove 이벤트')">mousemove</div>
            change: <input type="text" ng-model="inputText" ng-change="handleEvt('입력 박스의 값 변경')">
            keydown: <input type="text" ng-model="inputText2" ng-keydown="handleEvt($event.keyCode + '키코드 눌러짐')">
        </div>
        <div>
            <p>{{message}} {{eventCnt}}</p>
        </div>
    </body>
</html>
Colored by Color Scripter
cs

8. CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿

웹 애플리케이션을 개발하다 보면 특정 상황에서 CSS 클래스를 동적으로 처리해야 할 때가 잦습니다. 가령 아이템 목록 중 특정 아이템에 highlight라는 CSS 클래스를 추가해 다른 아이템과 차이를 줄때가 그럴 것입니다. jQuery를 사용한다면 다음과 같이 <li> 요소를 선택하고 jQuery addClass 메서드를 이용해 자바스크립트에서 다음과 같이 처리했을 겁니다.

1
2
3
4
5
if (name === "Jack") {
    $('li').addClass('highlight');
} else {
    $('li').removeClass('hightlight');
}
Colored by Color Scripter
cs

하지만 AngularJS에서는 ng-class 지시자를 이용해 템플릿에서 CSS 클래스를 동적으로 처리할 수 있습니다.

...

</ANY>

또는

...

</ANY>

ng-class는 앞에서 본 바와 같이 태그 속성 또는 class 속성의 값으로 ng-class: 표현식과 같이 사용할 수 있습니다. 표현식의 결과 값은 CSS 클래스 이름을 스페이스로 구분한 문자열이거나, CSS 클래스 이름들로 구성된 배열이거나, CSS 클래스 이름이 속성이름이고 true/false를 값으로 하는 객체여야 합니다.

객체일 경우 특정 CSS 클래스 이름의 값이 true 일 때 해당 CSS 클래스가 요소에 적용됩니다. 예제를 통해서 과일 이름을 나열한 후 과일과 관련된 CSS를 추가후, 짝수 목록에 파란색을 나타내는 예제입니다.

* cssdynaexam.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html ng-app>
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <style type="text/css">
            .apple {background-color: red; }
            .lemon {background-color: yellow; }
            .even {background-color: blue; }
        </style>
    </head>
    <body>
        <div ng-init="fruitList = ['apple', 'banana', 'tomato', 'lemon', 'grape', 'strawberry', 'blueberry']">
            <ul>
                <li ng-repeat="fruit in fruitList" ng-class="'{{fruit}}'">{{fruit}}</li>
            </ul>
            <ul>
                <li ng-repeat="fruit in fruitList" ng-class="{'even': {{$index % 2 == 0 }}}">{{fruit}}</li>
            </ul>
        </div>
    </body>
</html>
Colored by Color Scripter
cs

앞에서 본 ng-class 지시자는 사전에 CSS 클래스가 스타일 시트에 정의되어 있고 해당 CSS 클래스를 HTML 요소에서 조건적으로 적용할 때 사용했습니다. 하지만 만약 CSS 클래스가 적용되어 있지 않고 HTML 요소의 스타일을 동적으로 변경하고 싶을 때는 어떻게 할 수 있을까요?

이러한 방법을 AngularJS를 통해서 작성하면 아래와 같습니다.

...

</ANY>

표현식의 계산 결과에 따라 HTML 요소에 CSS 스타일을 적용합니다. 표현식의 결과는 객체여야 하고 해당 객체의 키가 CSS 스타일의 이름이 되며 객체의 값이 CSS 스타일 이름에 대한 값이 됩니다.

* cssdynaexam2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html ng-app="dyna">
    <head>
        <meta charset="UTF-8"/>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
        <script>
            var app = angular.module("dyna", []);
            app.controller('mainCtrl', function($scope) {
                $scope.bgStyle = {
                    backgroundColor: 'red'
                };
                $scope.changeColor = function(color) {
                    $scope.bgStyle.backgroundColor = color;
                };
            });
        </script>
    </head>
    <body ng-controller="mainCtrl">
        <div>
            <div ng-style="bgStyle">{{bgStyle.backgroundColor}}</div>
            <button ng-click="changeColor('blue')">색 변경</button>
        </div>
    </body>
</html>
Colored by Color Scripter
cs

* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다.

저작자표시

'Web > AngularJS' 카테고리의 다른 글

[AngularJS] 7-1. 지시자(Directive) 기본 - AngularJS 강좌 (0)	2016.04.04
[AngularJS] 6. 모듈(Module) - AngularJS 강좌 (0)	2016.04.01
[AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌 (0)	2016.04.01
[AngularJS] 4. 템플릿 시스템과 데이터 바인딩 - 1 - AngularJS 강좌 (0)	2016.01.29
[AngularJS] 3. AngularJS 부트스트랩(Bootstrap) - AngularJS 강좌 (0)	2016.01.15
[AugularJS] 2. AugularJS 살펴보기 - AngularJS 강좌 (0)	2016.01.15

ABOUT ME

Palpit's Techlog Palpit's Techlog

'Web > AngularJS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Web > AngularJS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바