AngularJS로 하는 웹 애플리케이션 개발

1장 AngularJS 철학
AngularJS와의 첫 만남
__프레임워크에 익숙해지기
__프로젝트에서 자신만의 길 찾기
____커뮤니티
____온라인 학습 자료
__라이브러리와 확장성
__도구
____Batarang
____Plunker와 jSFiddle
____IDE 확장 기능과 플러그인
AngularJS 집중 강좌
__Hello World: AngularJS 예제
____양방향 데이터 바인딩
__AngularJS의 MVC 패턴
____전체 살펴보기
____스코프 심화
____뷰
__모듈과 의존성 주입
____AngularJS의 모듈
____객체들과의 연동
____서비스 등록
____모듈 생명주기
____다른 모듈에 의존하는 모듈
AngularJS와 나머지 세상
__제이쿼리와 AngularJS
____사과와 오렌지
__미래 살짝 엿보기
정리


2장 빌드와 테스팅
샘플 애플리케이션 소개
__문제 도메인에 익숙해지기
__기술 스택
__영구 저장소
____몽고랩
____서버 측 환경
____서드파티 자바스크립트 라이브러리
____부트스트랩 CSS
빌드 시스템
__빌드 시스템 원칙
____모두 자동화
____빠른 실패와 빠른 수습
____다른 절차라면 다른 명령으로
____빌드 스크립트도 코드다
__도구
____Grunt.js
____테스트 라이브러리와 도구
____Jasmine
____Karma 실행기
파일과 폴더 구조
__루트 폴더
__소스 폴더 내부
____AngularJS 관련 파일
____시작은 간단하게
____테스트 폴더 내용
__파일 명명 규칙
AngularJS 모듈과 파일
__하나의 모듈은 하나의 파일로
__모듈 내부
____제공자를 등록하는 여러 가지 문법
____설정과 실행 범위를 선언하는 문법
자동화된 테스트
__단위 테스트
____Jasmine 테스트 구조
____AngularJS 객체 테스트
____서비스 테스트
____컨트롤러 테스트
____목 객체와 비동기 코드 테스트
__종단 간 테스트
____일일 작업 흐름
____Karma 실행기 팁
____특정 테스트만 실행
____디버깅
정리


3장 백엔드 서버와의 통신
$http로 XHR과 JSONP 요청 생성
__데이터 모델과 MongoLab URL에 익숙해지기
__$http API 빠르게 살펴보기
____설정 객체 입문
____요청 데이터 변환
____HTTP 응답 처리
____응답 데이터 변환
__동일 출처 정책 제한 다루기
____JSONP로 동일 출처 정책 제한 극복
____JSONP의 한계
____CORS로 동일 출처 정책 제한 극복
____서버 측 프락시
$q 프라미스 API
__프라미스와 $q 서비스 사용
____$q 서비스 기본
____일급 자바스크립트 객체인 프라미스
____콜백 모음
____콜백 등록과 프라미스 생명주기
____비동기 동작 체인
____$q 심화
__AngularJS의 $q 통합
$http와 프라미스 API
RESTful 엔드포인트와 통신
__$resource 서비스
____생성자 기반 메소드와 인스턴스 기반 메소드
____$resource가 생성하는 비동기 메소드
____$resource 서비스의 한계
__$http로 만든 사용자 정의 REST 어댑터
$http 추가 기능 사용
__응답 가로채기
$http와 통신하는 테스트 코드
정리


4장 데이터 포맷과 출력
디렉티브에 대한 참조
표현식 평가 결과 출력
__인터폴레이션 디렉티브
__ngBind로 모델 값 렌더링
__AngularJS 표현식 안의 HTML
조건부 출력
__조건별로 특정 블록 추가
ngRepeat 디렉티브로 컬렉션 렌더링
__ngRepeat 디렉티브 익숙해지기
__특별한 변수
__객체의 프로퍼티 순회
__ngRepeat 패턴
____리스트와 세부 내용
____테이블, 요소, 클래스 수정
DOM 이벤트 핸들러
DOM 기반 템플릿의 효율적인 사용
__장황한 문법
__ngRepeat과 여러 DOM 요소
__실행 중에 변경할 수 없는 요소와 속성
__사용자 정의 HTML 요소와 오래된 버전의 IE
필터로 모델 다루기
__기본 제공 필터
____서식 변경 필터
____배열 변경 필터
__사용자 정의 필터 생성: 페이지 번호 매기기 예제
__자바스크립트 코드에서 필터 접근
__필터 주의 사항
____필터와 DOM 조작
____필터의 데이터 변형 비용
____불안정한 필터
정리


5장 고급 폼 작성
기본 폼과 AngularJS 폼 비교
__ngModel 디렉티브 소개
사용자 정보 폼 작성
input 디렉티브의 이해
__필요한 값 검증
__문자 기반 input 사용
__체크박스 input 사용
__라디오 input 사용
__select input 사용
____간단한 문자열 옵션
____ngOptions 디렉티브를 사용한 동적인 옵션
____select 디렉티브로 빈 옵션 처리
____select와 객체 동치 이해
____여러 개의 옵션 선택
__기존 HTML hidden input 필드
____서버가 생성한 값에 포함된 경우
____기존 HTML 폼 제출
ngModel 데이터 바인딩 심화 학습
__ngModelController
____모델과 뷰의 값 변형
____값 변경 여부 추적
____input 필드 유효 여부 추적
AngularJS 폼 검증
__ngFormController
____name 속성으로 폼을 스코프에 추가
__사용자 정보 폼에 동적인 동작 추가
____유효 검사 오류 보여주기
____저장 버튼 비활성화
__브라우저 자체 검증 기능 비활성화
다른 폼과 중첩된 폼
__재사용 가능한 컴포넌트로서의 서브 폼 사용
서브 폼 반복 사용
__반복되는 input 검증
기존 HTML 폼 제출
__서버로 바로 폼 제출
__제출 이벤트 다루기
____ngSubmit으로 폼 제출
____ngClick으로 폼 제출
사용자 정보 폼 초기화
정리


6장 내비게이션 구성
단일 페이지 웹 애플리케이션의 URL
__HTML5 이전 시대의 Hashbang URL
__HTML5와 history API
$location 서비스 사용
__$location 서비스 API와 URL 이해
__해시, 페이지 내비게이션, $anchorScroll
__HTML5 모드 설정
____클라이언트 측
____서버 측
__$location 서비스로 직접 내비게이션 작성
____페이지 경로 작성
____경로에 URL 연결
____경로마다 컨트롤러 정의
____직접 제작한 내비게이션의 단점
AngularJS 내장 경로 서비스 사용
__기본적인 경로 정의
____일치하는 경로의 내용 보여주기
__변경되는 경로 찾기
____기본 경로 설정
____경로의 매개변수 값 사용
__서로 다른 컨트롤러에서 파셜 재사용
__경로 변경 시 깜빡거림 현상 제거
__경로 변경 방지
$route 서비스의 한계
__한 화면의 한 영역에 대한 경로
____ng-include로 여러 UI 영역 다루기
__지원하지 않는 중첩 경로
경로 패턴, 팁, 트릭
__링크 다루기
____클릭 가능한 링크 작성
____HTML5와 Hashbang 모드에서도 동일하게 동작하는 링크
____외부 페이지 링크
__경로 정의 구조화
____경로 정의를 여러 개의 모듈로 분할
____경로 정의 시 중복 코드 제거
정리


7장 애플리케이션 보안
서버 측에서 인증과 허가 제공
__인증되지 않은 접근 처리
__서버 측 인증 API 제공
파셜 템플릿 보호
악의적인 공격 차단
__쿠키 스누핑(중간자 공격) 방지
__크로스사이트 스크립팅 공격 방지
____AngularJS 표현식으로 HTML 내용 보호
____안전하지 않은 HTML 바인딩 허용
____HTML 안전하게 만들기
__JSON 주입 취약점 방지
__크로스사이트 요청 위조 공격 방지
클라이언트 측 보안 추가
__security 서비스 작성
__로그인 폼 보여주기
__보안이 필요한 메뉴와 툴바 생성
____메뉴 항목 숨기기
____로그인 툴바 생성
클라이언트에서 인증과 허가 지원
__권한 실패 처리
__응답 가로채기
____HTTP 응답 인터셉터
__securityInterceptor 서비스 작성
__securityRetryQueue 서비스 작성
____security 서비스 통지
보안이 필요한 경로에 접근 방지
__경로 resolve 함수 사용
__authorization 서비스 작성
정리


8장 나만의 디렉티브 작성
AngularJS 디렉티브란
__내장 디렉티브
__HTML 마크업에서 디렉티브 사용
디렉티브 컴파일 생명주기
디렉티브에 대한 단위 테스트 작성
디렉티브 정의
디렉티브로 버튼 꾸미기
__버튼 디렉티브 만들기
AngularJS 위젯 디렉티브 이해
__페이지 번호 디렉티브 작성
__페이지 번호 디렉티브의 테스트 작성
__디렉티브에서 HTML 템플릿 사용
__부모 스코프에 독립적인 디렉티브
____@로 속성 인터폴레이트
____=로 속성 데이터 바인딩
____&로 속성에 콜백 표현식 추가
__위젯 구현
__디렉티브에 selectPage 콜백 추가
사용자 정의 검증 디렉티브 작성
__디렉티브 컨트롤러 요청
____선택적인 컨트롤러 작성
____부모 컨트롤러 검색
__ngModelController 연동
__사용자 정의 검증 디렉티브의 테스트 작성
__사용자 정의 검증 디렉티브 구현
비동기 모델 검증 기능 작성
__Users 서비스를 목으로 만들기
__비동기 검증 기능에 대한 테스트 작성
__비동기 검증 디렉티브 구현
jQueryUI를 랩핑한 datepicker 디렉티브
__라이브러리를 랩핑한 디렉티브 테스트 작성
__jQuery datepicker 디렉티브 구현
정리


9장 고급 디렉티브 작성
트랜스클루전(transclusion) 사용
__디렉티브에서 트랜스클루전 사용
__고립 스코프의 디렉티브로 내용 옮겨 넣기
__트랜스클루전을 사용해 경고 디렉티브 작성
____디렉티브 정의 시 사용하는 replace 프로퍼티 이해
____디렉티브 정의 시 사용하는 transclude 프로퍼티 이해
____ng-transclude로 옮겨 넣은 요소 추가
__트랜스클루전의 스코프 이해
트랜스클루전 함수 생성과 사용
__$compile 서비스로 트랜스클루전 함수 작성
____옮겨 넣을 때 기존 요소 복사
__디렉티브의 트랜스클루전 함수 사용
____transcludeFn으로 컴파일 함수에서 transclusion 함수 사용
____$transclude로 디렉티브 컨트롤러에서 transclusion 함수 사용
__트랜스클루전을 사용해서 if 디렉티브 작성
____디렉티브에서 priority 속성 사용
디렉티브 컨트롤러 이해
__디렉티브 컨트롤러에 특별한 의존 관계 주입
__컨트롤러 기반의 페이지 번호 디렉티브 작성
__디렉티브 컨트롤러와 링크 함수의 차이점
____의존성 주입
____컴파일 과정
____다른 컨트롤러에 접근
____트랜스클루전 함수에 접근
__accordion 디렉티브 작성
____accordion에서 디렉티브 컨트롤러 사용
____accordion 디렉티브 구현
____accordion-group 디렉티브 구현
컴파일 단계의 제어권 가져오기
__field 디렉티브 작성
____디렉티브에서 terminal 프로퍼티 사용
__$interpolate 서비스 사용
____유효성 검증 메시지 바인딩
__템플릿을 동적으로 로딩
__field 템플릿 설정
정리


10장 전 세계를 대상으로 하는 AngularJS 웹 애플리케이션 작성
특정 로케일 기호와 설정 사용
__특정 로케일 모듈 설정
__사용 가능한 로케일 설정
____특정 로케일 설정과 AngularJS 필터
번역
__AngularJS 템플릿에서 사용되는 문자열 번역
____필터 사용
____디렉티브 사용
__자바스크립트 코드의 문자열 번역
패턴, 팁, 요령
__주어진 로케일로 애플리케이션 초기화
____URL 일부분으로 로케일 정보 포함
__로케일 변경
__날짜, 숫자, 통화 형식 직접 정의
정리


11장 탄탄한 AngularJS 웹 애플리케이션 작성
AngularJS 내부 동작 이해
__문자열 기반의 템플릿 엔진이 아니다
____DOM 이벤트의 응답으로 모델 갱신
____모델 변경 사항을 DOM으로 전파
____DOM과 모델 동기화
____AngularJS 세상의 핵심 키 Scope.$apply
____종합해보기
성능 개선: 기대치 설정, 측정, 개선, 반복
AngularJS 애플리케이션 성능 개선
__CPU 사용률 최적화
____$digest 루프를 빠르게
____$digest 루프 빈도 줄이기
____각 $digest 루프의 수 제한
__메모리 소비 최적화
____가능하면 deep-watching 피하기
____watch의 대상이 되는 표현식의 크기 고려
__ng-repeat 디렉티브
____ng-repeat에서 컬렉션 watch
____많은 수의 바인딩
정리


12장 AngularJS 웹 애플리케이션의 패키징과 배포
네트워크 관련 성능 개선
__정적 리소스 최소화
____AngularJS가 의존성을 인지하는 방법
____최소화에도 안전한 자바스크립트 코드 작성
____배열 형태 DI 애노테이션의 단점
__템플릿 미리 로딩
____