AngularJS 인 액션

PART I AngularJS와 친해지기 1
CHAPTER 1 안녕하세요, AngularJS 3
1.1 AngularJS의 장점 4
1.2 AngularJS의 큰 그림 살펴보기 7
1.3 첫 번째 AngularJS 애플리케이션 8
1.3.1 모듈 12
1.3.2 뷰와 컨트롤러 13
1.3.3 서비스 18
1.3.4 디렉티브 21
1.4 요약 23

CHAPTER 2 AngularJS 애플리케이션 구성하기 25
2.1 안젤로 살펴보기 25
2.2 AngularJS 애플리케이션 구조 29
2.3 안젤로의 기반 살펴보기 31
2.4 라우트의 구성 및 탐색 33
2.5 몇 가지 모범 사례 37
2.6 요약 39

PART II AngularJS 제대로 활용하기 41
CHAPTER 3 뷰와 컨트롤러 43
3.1 큰 그림 44
3.2 AngularJS에서의 뷰의 정의 46
3.3 AngularJS에서의 컨트롤러의 정의 48
3.3.1 다이제스트 주기 48
3.3.2 controller-as 문법 50
3.3.3 AngularJS의 이벤트 51
3.4 속성과 표현식 52
3.4.1 ngRepeat를 이용해서 스토리 표시하기 52
3.4.2 필터 56
3.4.3 표현식 58
3.5 모범 사례 및 테스트 65
3.6 요약 68

CHAPTER 4 모델과 서비스 69
4.1 모델 및 서비스의 개념 70
4.1.1 서비스 이해하기 71
4.1.2 서비스의 생명주기 72
4.1.3 서비스의 종류 73
4.2 $http를 이용한 모델 76
4.2.1 $http 서비스란? 77
4.2.2 첫 모델 구현하기 77
4.2.3 $http 서비스의 편의 메서드들 79
4.3 프라미스 82
4.3.1 프로미스란 무엇일까? 82
4.3.2 프로미스 활용하기 82
4.3.3 $http.success와 $http.error 메서드 85
4.3.4 프로미스를 이용해 코드를 순차적으로 실행하기 86
4.4 $http 인터셉터 87
4.4.1 인터셉터가 필요한 이유 87
4.4.2 인터셉터의 활용 87
4.5 서비스 데코레이터 89
4.5.1 왜 데코레이터가 필요할까? 89
4.5.2 로그 개선하기 89
4.6 테스트에 대한 고려 91
4.6.1 서비스 테스트하기 91
4.6.2 $httpBackend 서비스를 이용해서 원격 서버를 모의 호출하기 93
4.6.3 모범 사례 95
4.7 요약 96

CHAPTER 5 디렉티브 97
5.1 디렉티브 소개 97
5.1.1 디렉티브란 무엇인가? 97
5.1.2 디렉티브가 필요한 이유 98
5.1.3 왜 우리는 디렉티브를 원하는가? 98
5.2 디렉티브 기초 다지기 99
5.2.1 사용자 스토리 디렉티브 99
5.3 고급 기능들 107
5.3.1 드래그 앤 드롭 기능 107
5.3.2 drag-container 디렉티브 적용하기 110
5.3.3 컨트롤러 구현하기 110
5.3.4 drop-container 디렉티브 구현하기 112
5.3.5 drop-container 디렉티브 활용하기 115
5.3.6 컨트롤러 구현하기 115
5.3.7 drop-target 디렉티브 구현하기 123
5.3.8 drop-target 디렉티브의 활용 125
5.3.9 컨트롤러 구현하기 126
5.3.10 $dragging 서비스 구현하기 127
5.3.11 StoryboardCtrl 컨트롤러 수정하기 128
5.4 서드파티 라이브러리 다시 활용하기 130
5.4.1 Flot 설치하기 131
5.4.2 디렉티브 구현하기 132
5.4.3 디렉티브 활용하기 132
5.4.4 데이터 처리하기 133
5.4.5 이제는 ‘격리된 스코프’에 대해 살펴볼 시간 134
5.4.6 최종 마무리: Flot 통합하기 137
5.5 디렉티브 테스트하기 138
5.6 모범 사례 141
5.7 요약 141

CHAPTER 6 애니메이션 143
6.1 애니메이션 소개 143
6.1.1 AngularJS가 애니메이션을 처리하는 방식 144
6.1.2 애니메이션의 이름 규칙 145
6.1.3 애니메이션 활성화하기 145
6.2 CSS 트랜지션 146
6.2.1 기본 트랜지션 구현하기 147
6.2.2 ng-enter 트랜지션 정의하기 147
6.2.3 ng-leave 트랜지션 정의하기 147
6.2.4 이동 애니메이션 구현하기 148
6.3 CSS 애니메이션 150
6.3.1 기본 애니메이션 클래스 정의하기 150
6.3.2 애니메이션 키프레임 정의하기 151
6.3.3 요소에 이동 애니메이션 적용하기 154
6.4 자바스크립트 애니메이션 155
6.4.1 자바스크립트 애니메이션 정의하기 156
6.4.2 자바스크립트 애니메이션 이벤트 156
6.4.3 자바스크립트 애니메이션 클래스 157
6.4.4 TweenMax 라이브러리 158
6.4.5 애니메이션을 실제로 적용하기 159
6.5 테스트 160
6.6 모범 사례 160
6.7 요약 161

CHAPTER 7 라우트로 웹사이트 구성하기 163
7.1 AngularJS 라우팅 구성 요소 164
7.2 AngularJS에서 라우트 생성하기 165
7.2.1 ngRoute와 ngView를 이용해서 첫 번째 라우트 정의하기 165
7.2.2 ngView 추가하기 165
7.2.3 $routeProvider를 이용해서 라우트 설정하기 166
7.2.4 라우트 탐색 설정하기 167
7.2.5 리뷰 168
7.3 라우트에 매개변수 사용하기 168
7.3.1 리뷰 171
7.4 라우트에서 의존성 해석하기 171
7.4.1 리뷰 173
7.5 라우트 이벤트 173
7.5.1 리뷰 174
7.6 테스트 174
7.7 모범 사례 176
7.8 요약 176

CHAPTER 8 폼과 유효성 검사 179
8.1 AngularJS의 폼 유효성 검사 180
8.1.1 HTML 폼 요소 확장하기 180
8.1.2 유효성 검사 추가하기 182
8.1.3 유효성 검사와 CSS 187
8.1.4 폼 유효성 검사, $setPrisitine, 그리고 $setUntouched 188
8.2 테스트 188
8.3 모범 사례 192
8.4 요약 192

APPENDIX A 카르마 설치하기 193
APPENDIX B Node.js 서버 설정하기 212
APPENDIX C Firebase 서버 설정하기 219
APPENDIX D 안젤로 앱 실행하기 222

이 함수는 디렉티브 정의 객체(DDO, Directive Definition Object)를 리턴한다. 이 객체는 디렉티브를 구성하기 위한 정보를 정의한 객체다. 예제에서는 이 디렉티브의 매 인스턴스마다 새로운 스코프(scope) 객체가 필요하다는 정보와 함께, 디렉티브가 선언된 요소와 교체될 템플릿을 정의하고 있다. 템플릿 마크업은 앞서 우리가 현재 선택된 스토리 아이템의 title 속성과 description 속성값을 표시하기 위해 사용했던 것과 동일한 코드를 사용하고 있으므로 이미 익숙한 코드일 것이다.

앞으로 다섯 개 장에 걸쳐 I부에서 우리가 살펴본 프로젝트의 확장된 버전인 예제 애플리케이션 안젤로를 구현해본다. 안젤로는 그 배경이 되는 트렐로 웹 애플리케이션을 존중하면서도 서버 측 커뮤니케이션, 디렉티브, 폼 및 유효성 검사, 애니메이션 등 AngularJS의 다양한 기법을 활용하여 개발된다.

getStories 메서드를 호출하면 StoriesModel.all 메서드가 원격 서버를 호출하며, 서버로부터 전달된 결과 데이터는 then 메서드를 이용해 처리한다. then 메서드의 첫 번째 매개변수는 원격 호출이 성공했을 경우의 응답을 처리할 핸들러 함수이며, 이 핸들러 함수의 첫 번째 매개변수는 원격 서버를 호출한 결과 데이터다. 예제에서와 같이 console.log(result.data) 코드를 실행하면 원격 서버를 호출하여 얻은 실제 데이터를 확인할 수 있다.