- 최신 버전이 반영되었습니다.
- 최신 버전은 책의 예제와 약간의 차이가 있습니다. 책의 예제코드는
ng-v4태그의 커밋을 참조해 주세요.
git checkout ng-v4
- 관련 이슈 #19
-
3장 예제 책의 코드 변경 (변경내역).
- 3장
다국어 환영 메시지 서비스->다국어 환영 인사 서비스 - 3장
한글->한국어
- 3장
-
43쪽 2번째 클래스 예제 코드
- constructor(public
string...) -> constructor(publicname...)
- constructor(public
-
214쪽 그림 6-16 위 단락 4번째줄
- [그림 6-16]의
우측상단에는 -> [그림 6-16]의좌측상단에는 - 자식 컴포넌트가
좌측에 선언되어 있습니다. -> 자식 컴포넌트가우측에 선언되어 있습니다.
- [그림 6-16]의
-
70쪽 양방향 데이터 바인딩 맛보기
- Angular CLI가 1.1 이후에 변경된 내용이 발생하여 70쪽 예제를 실습을 위해 추가 작업이 필요합니다.
- src/app/app.module.ts 파일에 다음 링크와 같이 코드를 수정해야 합니다. 코드 링크
-
먼저, 예제의 실행을 위해서는 다음의 도구가 필요합니다.
npm혹은yarn설치- 앵귤러 CLI 설치 (
npm -g i @angular/cli)
-
소스를 다운로드 받은 후에 각 프로젝트 폴더에서 패키지 인스톨 후에 예제를 직접 실행해 볼 수 있습니다.
-
[참고] 예제 코드 실행방법: Angular CLI에서 yarn 사용하기
# 리파지토리 다운로드
$) git clone https://github.com/not-for-me/hb-angular-first.git
# 프로젝트 폴더
$) cd hb-angular-first/ch03/ng-welcome-msg-app
# 패키지 설치
$) npm install (혹은 yarn)
# 앵귤러 CLI 개발 서버
$) ng serve
# 브라우저에서 http://localhost:4200 에서 예제 실행 확인
- 예제의 모든 커밋은 책의 내용에 따라 순차적으로 변경내역이 반영되어 있습니다.
- 특별히 중요한 변경내역에는 태그를 붙여두어 손쉽게 특정 커밋을 체크아웃 받을 수 있습니다.
# 태깅된 목록을 조회합니다.
$) git tag -l
# 5장의 태그만 보고 싶을
$) git tag -l | grep -e ch5
# 3장의 4번째 변경내역 체크아웃
$) git checkout ch3-4
- 일부 간단한 예제의 경우 온라인에서 바로 동작 예제를 확인할 수 있도록 다음의 링크를 제공합니다.
| 장 | 링크 | 실습 예제 |
|---|---|---|
| 4 | https://embed.plnkr.co/nSKxNw | NgIf 지시자 |
| 4 | https://embed.plnkr.co/KyGLSK | NgFor 지시자 |
| 4 | https://embed.plnkr.co/OI7zup | NgSwitch 지시자 |
| 4 | https://embed.plnkr.co/goPGcq | Pipe |
| 6 | https://embed.plnkr.co/OVQ7Eu | ViewChild |
| 6 | https://embed.plnkr.co/R9ppp3 | 템플릿 참조 변수 |
| 6 | https://embed.plnkr.co/SwHzA3 | 컨텐트 프로젝션 |
| 6 | https://embed.plnkr.co/55lLof | NgOnInit/Destory |
| 6 | https://embed.plnkr.co/ZqfVSF | NgOnChanges |
| 6 | https://embed.plnkr.co/3gLODm | DoCheck |
| 책에 없음 | https://embed.plnkr.co/QB5jlX | 지시자의 라이프 사이클 |
| 책에 없음 | https://embed.plnkr.co/nRcg7v | 프로퍼티 바인딩 관계 |
| 8 | https://embed.plnkr.co/LfXMl3 | NgModel |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent